1. Analyse d'ouverture
Que disons-nous dans cet article aujourd'hui? Hehehehe. Nous avons ensuite reconstruit les lacunes de l'article précédent et les avons analysées étape par étape de manière facile à comprendre, afin que tout le monde puisse s'améliorer étape par étape. Moins non-sens, arrivez au point. Prenons d'abord le précédent
Le code de partie JS est le suivant:
La copie de code est la suivante:
Fonction élémentSelector (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var isproto = itemSelector.prototype;
Isproto.getElem = function () {
Renvoyez ce.elem;
};
Isproto.getopts = function () {
Renvoyez ceci.opts;
};
/ * data manip * /
Isproto._setCurrent = fonction (courant) {
this.getOpts () ["Current"] = courant;
};
Isproto.getCurrentValue = fonction (courant) {
return this.getOpts () ["Current"];
};
/ * data manip * /
Isproto.init = function () {
var that = this;
this.getOpts () ["Current"] = null; // curseur de données
this._setItemValue (this.getOpts () ["currentText"]);
var itemSelem = that.getElem (). trouver (". Content .Items");
this.getElem (). trouver (". Title div"). sur ("cliquez", fonction () {
itemSelem.toggle ();
});
this.getElem (). trouver (". Title Span"). sur ("cliquez", fonction () {
itemSelem.toggle ();
});
$ .each (this.getOpts () ["items"], fonction (i, item) {
item ["id"] = (new Date (). getTime ()). toString ();
that._render (item);
});
};
Isproto._setItemValue = function (valeur) {
this.getElem (). trouver (". Title div"). texte (valeur)
};
Isproto._render = fonction (item) {
var that = this;
var itelsElem = $ ("<div> </div>")
.Text (élément ["texte"])
.attr ("id", item ["id"]);
if ("0" == item ["Disabled"]) {
itemlelem.on ("cliquez", fonction () {
var onchange = that.getOpts () ["change"];
that.getElem (). find (". Content .Items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.mouseOver (function () {
$ (this) .addclass ("item-hover");
})
.Mouseout (function () {
$ (this) .removeclass ("item-hover");
});
}
autre{
itemlelem.css ("Color", "# ccc"). sur ("cliquez", fonction () {
that.getElem (). find (". Content .Items"). hide ();
that._setItemValue (item ["text"]);
});
}
itelelem.appendto (this.getElem (). find (". Content .Items")));
};
L'effet est illustré dans la figure ci-dessous:
a) -------- État non opérable
b) ------ État opérable
(Ii) Ouvrez vos idées et reconstruisez
Il n'est pas difficile pour vous de voir dans le code qu'il a été efficacement organisé de manière orientée objet à travers les caractéristiques de syntaxe dans "JS", qui est bien meilleure que la méthode d'organisation basée sur les processus, mais vous trouverez toujours de nombreuses lacunes.
(1) il y a trop de répétitions
(2) la division des responsabilités n'est pas claire
(3) Le processus n'est pas complet
Nous avons effectivement refactorisé en fonction des points ci-dessus. Tout d'abord, nous devons trier les exigences de ce composant, et les points fonctionnels sont les suivants:
(1) Initialiser le composant de configuration
La copie de code est la suivante:
$ (function () {
var itemSelector = new ItemSelector ($ ("# item-selector"), {
CurrentText: "Veuillez choisir l'élément",
articles: [
{
Texte: "javascript",
Valeur: "JS",
Désactivé: "1"
},
{
Texte: "CSS",
Valeur: "CSS",
Désactivé: "0"
},
{
Texte: "html",
valeur: "html",
Désactivé: "0"
}
],
});
itemSelector.init ();
});
Ce code est très clair et ne nécessite aucune modification, mais vous pouvez étendre les fonctions en fonction de la configuration ci-dessus, comme l'ajout de l'élément de configuration "Mode" pour prendre en charge plusieurs options. Par exemple: "Mode de cocher à cocher".
Vient ensuite pour terminer la logique d'initialisation, comme suit:
La copie de code est la suivante:
Isproto.init = function () {
var that = this;
this.getOpts () ["Current"] = null; // curseur de données
this._setItemValue (this.getOpts () ["currentText"]);
var itemSelem = that.getElem (). trouver (". Content .Items");
this.getElem (). trouver (". Title div"). sur ("cliquez", fonction () {
itemSelem.toggle ();
});
this.getElem (). trouver (". Title Span"). sur ("cliquez", fonction () {
itemSelem.toggle ();
});
$ .each (this.getOpts () ["items"], fonction (i, item) {
item ["id"] = (new Date (). getTime ()). toString ();
that._render (item);
});
};
Ce code a de nombreux problèmes, des responsabilités peu claires et la logique d'initialisation contient des implémentations détaillées de points fonctionnels.
Continuez à voir le code de rendu:
La copie de code est la suivante:
Isproto._render = fonction (item) {
var that = this;
var itelsElem = $ ("<div> </div>")
.Text (élément ["texte"])
.attr ("id", item ["id"]);
if ("0" == item ["Disabled"]) {
itemlelem.on ("cliquez", fonction () {
var onchange = that.getOpts () ["change"];
that.getElem (). find (". Content .Items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.mouseOver (function () {
$ (this) .addclass ("item-hover");
})
.Mouseout (function () {
$ (this) .removeclass ("item-hover");
});
}
autre{
itemlelem.css ("Color", "# ccc"). sur ("cliquez", fonction () {
that.getElem (). find (". Content .Items"). hide ();
that._setItemValue (item ["text"]);
});
}
itelelem.appendto (this.getElem (). find (". Content .Items")));
};
Le problème est évident. Des opérations reproductibles ont été trouvées et une abstraction raisonnable doit être effectuée et l'objectif de réutilisation a été atteint.
L'ensemble du processus de construction comprend l'initialisation, le rendu (liaison des événements) et les méthodes de fonctionnement des données connexes et les méthodes auxiliaires des opérations DOM.
Pour résumer, après un tri simple, nous devons établir l'objectif opérationnel de la fonction et l'attribution des tâches de la ligne principale du processus, dont chacun sera responsable de ses propres responsabilités.
Le but de notre reconstruction est donc très clair, non! Il s'agit de résumer des points fonctionnels et de diviser les responsabilités avec une division amicale, alors comment y parvenir?
La première étape consiste à établir des fonctions de processus: (interface de méthode)
La copie de code est la suivante:
Isproto.init = function () {
// Mettez votre code ici!
};
Isproto._render = function () {
// Mettez votre code ici!
};
Partie 2: Établir une interface de méthode abstraite:
La copie de code est la suivante:
Isproto._fnitemSelectorDelegateHandler = function () {
// Mettez votre code ici!
};
Isproto._fntriggerhandler = function () {
// Mettez votre code ici!
};
IsProto._AdDorreMoveClass = function () {
// Mettez votre code ici!
};
La troisième étape consiste à établir une interface de fonctionnement des données:
La copie de code est la suivante:
Isproto._setCurrent = function () {
// Mettez votre code ici!
};
Isproto._getCurrent = function () {
// Mettez votre code ici!
};
Il existe également quelques références au code source complet ci-dessous, qui est juste l'idée mentionnée ici.
(Iii), le code complet est pour l'apprentissage, ce code a été testé
La copie de code est la suivante:
Fonction élémentSelector (elem, opts) {
this.elem = elem;
this.opts = opts;
this.current = -1; // curseur de données
};
var isproto = itemSelector.prototype;
/ * API Getter * /
Isproto.getElem = function () {
Renvoyez ce.elem;
};
Isproto.getopts = function () {
Renvoyez ceci.opts;
};
Isproto._getCurrent = function () {
Renvoyez ceci.Current;
};
/ * API Getter * /
/ * data manip * /
Isproto._setCurrent = fonction (courant) {
this.current = courant;
};
Isproto._setItemText = fonction (texte) {
this.getElem (). trouver (". Title div"). texte (texte);
};
/ * data manip * /
/ * Mise à jour sur 2015 1/31 23:38 * /
IsProto._fntRriggerHandler = fonction (index, texte, valeur) {
if (this._isDisabled (value)) {
index = -1;
text = this.getOpts () ["currentText"];
}
this._setItemText (texte);
this._setCurrent (index);
this.getElem (). trouver (". Content .Items"). Hide ();
};
IsProto._AdDorreMoveClass = function (elem, classname, addis) {
if (addis) {
elem.addclass (className);
}
autre{
elem.removeclass (className);
}
};
Isproto._fnitemSelectorDelegateHandler = function () {
var that = this;
this.getElem (). sur ("cliquez", "[data-toggle]", function () {
that.getElem (). find (". Content .Items"). toggle ();
});
};
IsProto._isDisabled = fonction (valeur) {
return ("1" == valeur)? vrai: false;
};
/ * Mise à jour sur 2015 1/31 23:38 * /
Isproto.init = function () {
var that = this;
this._fnitemSelectorDelegateHandler ();
$ .each (this.getOpts () ["items"], fonction (i, item) {
item ["index"] = i;
that._render (item);
});
this._fnttriggerHandler (this._getCurrent (), this.getOpts () ["currentText"], "1");
};
Isproto._render = fonction (item) {
var that = this;
var itelsElem = $ ("<div> </div>"). text (item ["text"]). att ("id", élément ["index"]);
var activeClass = ("0" == item ["Disabled"])? "Item-Hover": "Item-Disabled-Hover";
itemlelem.on ("cliquez", fonction () {
that._fnttriggerhandler (item ["index"], item ["text"], item ["hisabled"]);
})
.mouseOver (function () {
That._AdDorreMoveClass ($ (this), activeClass, true);
})
.Mouseout (function () {
that._addorreMoveClass ($ (this), activeClass, false);
});
itelelem.appendto (this.getElem (). find (". Content .Items")));
};
(Iv), résumé final
(1) Une analyse raisonnable des exigences fonctionnelles d'une manière de penser orientée objet.
(2), organiser notre logique de plug-in de manière en classe.
(3) reconstruire en continu les exemples ci-dessus, comment reconstruire raisonnablement cela? Ne sur-des dessine, soyez à l'aise. La méthode recommandée consiste à combiner la conception de processus avec la conception de réflexion orientée objet.
(4) L'article suivant élargira les fonctions connexes, telles que le "mode" de la propriété. Lorsqu'il est "1", il prend en charge le mode Multi-Select Box, mais maintenant c'est juste le mode déroulant par défaut.
En regardant mon article, est-ce bien mieux que le code précédent? Les amis devraient réfléchir et faire plus de projets par eux-mêmes et essayer de rendre leur propre code plus raisonnable.