1. Analyse d'ouverture
Salut tout le monde! Vous souvenez-vous encore de l'article précédent ----- Le début de cette série (Tutoriel de développement du plug-in JavaScript 1). Il raconte principalement l'histoire de "Comment développer des plug-ins dans jQuery",
Aujourd'hui, nous poursuivrons notre parcours de développement plug-in avec les questions d'hier. Les questions précédentes sont les suivantes:
(1) Si la sélection et le remplacement de la technologie du projet de ces plug-ins, il s'appuie sur le mécanisme "jQuery", les plug-ins que nous avons écrits auparavant ne seront pas utilisés (en supposant que jQuery n'est pas utilisé), comment le refacter?
(2) Refactoriser la logique clé des plug-ins, comment allons-nous organiser cela?
D'accord, apprenons l'article d'aujourd'hui avec des questions.
Tout d'abord, je ne nie pas la «méthode du plug-in jQuery», et deuxièmement, nous devons analyser le problème sous différents points de vue, tels que «le plug-in jQuery a les avantages suivants»:
(1) Mettez tout le code dans la fermeture (une fonction d'exécution instantanée). À l'heure actuelle, la fermeture équivaut à une portée privée. L'externe ne peut pas accéder aux informations internes et il n'y aura pas de pollution des variables globales.
(2), a) Éviter les dépendances globales; b) Évitez les dégâts tiers; c) Compatible avec les opérateurs jQuery '$' et 'jQuery'.
Donc, de quelle manière allons-nous organiser le code, quelle est l'idée orientée objet (POO)? Ou devrions-nous procéder à l'idée basée sur les processus? Ou est-ce une combinaison des deux? Hahaha, continue de regarder. . . . . .
2. Reconstruire l'exemple d'hier
Ce qui suit est la partie du code source de la pièce JS d'hier:
La copie de code est la suivante:
(fonction ($) {
$ .fn.bigbear = fonction (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
return this.each (function () {
var elem = $ (this);
elem.find ("span"). text (opts ["titre"]);
$ .get (opts ["url"], fonction (data) {
elem.find ("div"). text (data ["texte"]);
});
});
};
$ .fn.bigbear.defaults = {
Titre: "Ceci est un test simple",
URL: "data.json"
};
}) (jQuery);
Analyons-le pas à pas:
Tout d'abord, déterminez les fonctions de ce plugin
(1), affichez les informations du texte du titre que nous définissons.
(2) Obtenir dynamiquement des informations de contenu par des moyennes asynchrones.
Très bien! Il est facile d'en discuter si les exigences sont claires. Il n'est pas difficile de voir à partir du code ci-dessus que la logique est lâche et que la pensée basée sur le processus est évidente, donc la première étape consiste à mettre nos exigences fonctionnelles dans
Organisez efficacement de manière en classe. Regardez le code refactorisé comme suit:
La copie de code est la suivante:
$ (function () {
$ ("# bb"). bigbear ();
});
(fonction ($) {
$ .fn.bigbear = fonction (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
return this.each (function () {
var elem = $ (this);
var bb = new Bigbear (elem, opts);
bb.getElem (). Trigger ("data");
});
};
$ .fn.bigbear.defaults = {
Titre: "Ceci est un test simple",
URL: "data.json"
};
}) (jQuery);
fonction bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getElem = function () {
Renvoyez ce.elem;
};
bbproto.getopts = function () {
Renvoyez ceci.opts;
};
bbproto.init = fonction () {
var that = this;
this.getElem (). sur ("data", function () {
that._setTitle (that.getOpts () ["title"]);
$ .get (that.getOpts () ["url"], fonction (résultat) {
that.getElem (). find ("div"). text (résultat ["texte"]);
});
});
};
bbproto._settitle = fonction (texte) {
this.getElem (). trouver ("span"). text (texte);
};
Hahaha, y a-t-il beaucoup plus de code? En fait, cette méthode consiste à examiner le problème d'un point de vue orienté objet, à analyser d'abord les exigences fonctionnelles, puis à concevoir notre classe. Bien qu'il nous soit impossible de le concevoir très bien tout de suite.
Cependant, la perspective du problème a changé, notre code est devenu plus lisible et nous pouvons le maintenir mieux, afin que notre objectif puisse être atteint.
Ce qui suit est la mise en œuvre du code source pertinent extrait de la section JS "bootstrap", comme indiqué ci-dessous:
Il n'est pas difficile de voir qu'il existe également des méthodes d'implémentation similaires, qui maintient la logique principale de notre plug-in via des classes.
(Iii), ajouter de nouvelles fonctions et introduire des classes supplémentaires
Maintenant, la demande a augmenté, et il doit y avoir des changements d'expérience, et il y a un effet de "chargement" lors du chargement des données.
L'idée d'implémentation peut être ceci: définissez le texte sur le mot "Charger les données ..." dans la zone de contenu d'origine, puis introduire une nouvelle classe, comme suit:
La copie de code est la suivante:
superposition de fonction () {
};
var olproto = superposition.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// Je n'écrirai pas l'implémentation spécifique
D'accord, la couche de masque est déjà là, comment pouvons-nous l'intégrer maintenant? Nous y accédons dans une combinaison, comme suit:
La copie de code est la suivante:
fonction bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overlay = new overlay ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getElem = function () {
Renvoyez ce.elem;
};
bbproto.getopts = function () {
Renvoyez ceci.opts;
};
bbproto.init = fonction () {
var that = this;
var chargeingText = "Data Loading ....";
this.getElem (). sur ("data", function () {
that._setTitle (that.getOpts () ["title"]);
that.overlay.show ();
that.getElem (). find ("div"). text (chargeingText);
$ .get (that.getOpts () ["url"], fonction (résultat) {
that.overlay.hide ();
that.getElem (). find ("div"). text (résultat ["texte"]);
});
});
};
bbproto._settitle = fonction (texte) {
this.getElem (). trouver ("span"). text (texte);
};
Ceci est juste pour la fin de nos fonctions. Je crois que le plug-in écrit de cette manière est bien meilleur que la première version. Bien sûr, ce n'est pas l'implémentation optimale et doit être constamment refactorisé à partir des détails, mais cette méthode est un moyen facultatif de développer des plug-ins.
Voici le code complet:
La copie de code est la suivante:
$ (function () {
$ ("# bb"). bigbear ();
});
(fonction ($) {
$ .fn.bigbear = fonction (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
return this.each (function () {
var elem = $ (this);
var bb = new Bigbear (elem, opts);
bb.getElem (). Trigger ("data");
});
};
$ .fn.bigbear.defaults = {
Titre: "Ceci est un test simple",
URL: "data.json"
};
}) (jQuery);
fonction bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overlay = new overlay ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getElem = function () {
Renvoyez ce.elem;
};
bbproto.getopts = function () {
Renvoyez ceci.opts;
};
bbproto.init = fonction () {
var that = this;
var chargeingText = "Data Loading ....";
this.getElem (). sur ("data", function () {
that._setTitle (that.getOpts () ["title"]);
that.overlay.show ();
that.getElem (). find ("div"). text (chargeingText);
$ .get (that.getOpts () ["url"], fonction (résultat) {
that.overlay.hide ();
that.getElem (). find ("div"). text (résultat ["texte"]);
});
});
};
bbproto._settitle = fonction (texte) {
this.getElem (). trouver ("span"). text (texte);
};
superposition de fonction () {
};
var olproto = superposition.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// Je n'écrirai pas l'implémentation spécifique
Cet article est terminé pour l'instant. Avez-vous une nouvelle compréhension du développement plug-in de JavaScript?