Tutorial zur Entwicklung von JavaScript-Plug-Ins (6)_Javascript-Kenntnisse

1, Eröffnungsanalyse

Worüber sollen wir im heutigen Artikel sprechen? Hey, hey, hey. Wir werden den vorherigen Artikel fortsetzen, um die Mängel zu rekonstruieren und Schritt für Schritt auf einfache und leicht verständliche Weise zu analysieren, sodass jeder einen schrittweisen Verbesserungsprozess durchführen kann. Kommen wir ohne weitere Umschweife zum Punkt. Lassen Sie uns zunächst das vorherige

durchgehen

Der Code für den Js-Teil lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion ItemSelector(elem,opts){
This.elem = elem ;
This.opts = opts ;
} ;
var ISProto = ItemSelector.prototype ;
ISProto.getElem = function(){
Geben Sie this.elem zurück ;
} ;
ISProto.getOpts = function(){
Gibt this.opts zurück ;
} ;
/* Datenmanipulation*/
ISProto._setCurrent = function(current){
This.getOpts()["current"] = current ;
} ;
ISProto.getCurrentValue = function(current){
Geben Sie this.getOpts()["current"] ;
zurück } ;
/* Datenmanipulation*/
ISProto.init = function(){
var that = this ;
This.getOpts()["current"] = null ; // Datencursor
This._setItemValue(this.getOpts()["currentText"]) ;
var itemsElem = that.getElem().find(".content .items") ;
This.getElem().find(".title div").on("click",function(){
itemsElem.toggle() ;
}) ;
This.getElem().find(".title span").on("click",function(){
itemsElem.toggle() ;
}) ;
$.each(this.getOpts()["items"],function(i,item){
Item["id"] = (new Date().getTime()).toString() ;
That._render(item) ;
}) ;
} ;
ISProto._setItemValue = Funktion(Wert){
This.getElem().find(".title div").text(value)
} ;
ISProto._render = function(item){
var that = this ;
var itemElem = $("

")
.text(item["text"])
​ .attr("id",item["id"]) ;
If("0" == item["disabled"]){
itemElem.on("click",function(){
            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") ;
           }) ;
}
       sonst{
itemElem.css("color","#ccc").on("click",function(){
That.getElem().find(".content .items").hide() ;
That._setItemValue(item["text"]) ;
           }) ;
}
itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;

Der Effekt ist wie folgt:

　a)------Nicht betriebsfähiger Zustand

b)------Betriebsfähiger Status

(2), öffne deinen Geist und rekonstruiere

Aus dem Code ist nicht schwer zu erkennen, dass er durch die grammatikalischen Merkmale von „Js“ effektiv auf objektorientierte Weise organisiert wurde, was viel besser ist als die lose prozedurale Organisationsform, aber es gibt immer noch viele Mängel.

　(1), es gibt zu viele wiederholte Codes

(2), unklare Aufgabenverteilung

(3), der Prozess ist nicht perfekt

Wir führen eine effektive Rekonstruktion auf der Grundlage der oben genannten Punkte durch. Zuerst müssen wir die Anforderungen dieser Komponente klären. Die funktionalen Punkte sind wie folgt:

　(1), Konfigurationskomponente initialisieren

Code kopieren Der Code lautet wie folgt:

$(function(){
var itemSelector = new ItemSelector($("#item-selector"),{
           currentText: „Bitte Artikel auswählen“ ,
Artikel: [
                 {
                   Text: „JavaScript“ ,
                   Wert: "js" ,
Deaktiviert: „1“
                                                                                      {
                  text: "Css" ,
                   Wert: "css" ,
Deaktiviert: „0“
                                                                                      {
                  Text: "Html" ,
                   Wert: "html" ,
Deaktiviert: „0“
            }
] ,
}) ;
itemSelector.init() ;
}) ;

Dieser Code ist sehr klar und erfordert keine Änderung. Sie können die Funktion jedoch basierend auf der obigen Konfiguration erweitern, z. B. durch Hinzufügen des Konfigurationselements „Modus“, um mehrere Optionen zu unterstützen. Zum Beispiel: „Kontrollkästchen-Auswahlmodus“.

Der nächste Schritt besteht darin, die Initialisierungslogik wie folgt abzuschließen:

Code kopieren Der Code lautet wie folgt:

ISProto.init = function(){

var that = this ;
This.getOpts()["current"] = null ; // Datencursor
This._setItemValue(this.getOpts()["currentText"]) ;
var itemsElem = that.getElem().find(".content .items") ;
This.getElem().find(".title div").on("click",function(){
itemsElem.toggle() ;
}) ;
This.getElem().find(".title span").on("click",function(){
itemsElem.toggle() ;
}) ;
$.each(this.getOpts()["items"],function(i,item){
Item["id"] = (new Date().getTime()).toString() ;
That._render(item) ;
}) ;
} ;

Dieser Code weist viele Probleme auf, die Verantwortlichkeiten sind unklar und die Initialisierungslogik umfasst die detaillierte Implementierung von Funktionspunkten.

Schauen wir uns weiterhin den Rendering-Code an:

Code kopieren Der Code lautet wie folgt:

ISProto._render = function(item){
var that = this ;
var itemElem = $("

")
.text(item["text"])
​ .attr("id",item["id"]) ;
If("0" == item["disabled"]){
itemElem.on("click",function(){
            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") ;
           }) ;
}
       sonst{
itemElem.css("color","#ccc").on("click",function(){
That.getElem().find(".content .items").hide() ;
That._setItemValue(item["text"]) ;
           }) ;
}
itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;

Das Problem liegt auf der Hand. Wenn sich wiederholende Vorgänge gefunden werden, sollten diese angemessen abstrahiert werden, um den Zweck der Wiederverwendung zu erreichen.

Der gesamte Assembly-Prozess umfasst Initialisierung, Rendering (Ereignisbindung) sowie zugehörige Datenoperationsmethoden und Hilfsmethoden für DOM-Operationen.

Zusammenfassend sollten wir nach einem einfachen Durchkämmen den operativen Zweck der Funktion und die Aufgabenverteilung der Hauptprozesslinie festlegen und jeder sollte dafür verantwortlich sein.

Der Zweck unseres Wiederaufbaus ist also ganz klar, richtig! Es bedeutet eine Abstraktion von Funktionspunkten und eine freundliche Aufteilung der Verantwortlichkeiten. Wie erreichen wir das?

Der erste Schritt besteht darin, die Prozessfunktionsmethode festzulegen: (Methodenschnittstelle)

Code kopieren Der Code lautet wie folgt:

ISProto.init = function(){
// Geben Sie Ihren Code hier ein!
} ;
ISProto._render = function(){
// Geben Sie Ihren Code hier ein!
} ;

Der zweite Teil, die Einrichtung der abstrakten Methodenschnittstelle:

Code kopieren Der Code lautet wie folgt:

ISProto._fnItemSelectorDelegateHandler = function(){
// Geben Sie Ihren Code hier ein!
} ;
ISProto._fnTriggerHandler = function(){
// Geben Sie hier Ihren Code ein!
} ;
ISProto._addOrRemoveClass = function(){
// Geben Sie hier Ihren Code ein!
} ;

Der dritte Schritt besteht darin, eine Datenoperationsschnittstelle einzurichten:

Code kopieren Der Code lautet wie folgt:

ISProto._setCurrent = function(){
// Geben Sie Ihren Code hier ein!
} ;
ISProto._getCurrent = function(){
// Geben Sie hier Ihren Code ein!
} ;

Il y a aussi quelques codes sources complets ci-dessous, voici juste des idées.

(3), code complet pour l'apprentissage, ce code a été testé

Copier le code Le code est le suivant :

fonction ItemSelector(elem,opts){
Ceci.elem = elem ;
This.opts = opte ;
This.current = -1; // Curseur de données
} ;
var ISProto = ItemSelector.prototype ;
/* API getter*/
ISProto.getElem = fonction(){
Renvoie ce.elem ;
} ;
ISProto.getOpts = fonction(){
Renvoyez this.opts ;
} ;
ISProto._getCurrent = fonction(){
Renvoie this.current ;
} ;
/* API getter*/
/* manipulation de données*/
ISProto._setCurrent = fonction (courant){
This.current = courant ;
} ;
ISProto._setItemText = fonction (texte){
This.getElem().find(".title div").text(text) ;
} ;
/* manipulation de données*/

/* mise à jour le 31/01/2015 23:38 */
ISProto._fnTriggerHandler = fonction (index, texte, valeur){
Si(this._isDisabled(value)){
indice = -1 ;
         text = this.getOpts()["currentText"] ;
>
This._setItemText(text) ;
This._setCurrent(index) ;
This.getElem().find(".content .items").hide() ;
} ;
ISProto._addOrRemoveClass = function(elem,className,addIs){
Si(addIs){
           elem.addClass(className) ;
>
autre{
          elem.removeClass(className) ;
>
} ;
ISProto._fnItemSelectorDelegateHandler = function(){
var ça = ceci ;
This.getElem().on("click","[data-toggle]",function(){
That.getElem().find(".content .items").toggle() ;
}) ;
} ;
ISProto._isDisabled = fonction (valeur){
Retour ("1" == valeur) ? true : false ;
} ;
/* mise à jour le 31/01/2015 23:38 */
ISProto.init = fonction(){
var ça = ceci ;
This._fnItemSelectorDelegateHandler() ;
$.each(this.getOpts()["items"],function(i,item){
Article["index"] = i ;
Cela._render(item) ;
}) ;
This._fnTriggerHandler(this._getCurrent(),this.getOpts()["currentText"],"1") ;
} ;
ISProto._render = fonction (élément) {
var ça = ceci ;
var itemElem = $("

").text(item["text"]).attr("id",item["index"]) ;
var activeClass = ("0" == item["disabled"]) ? "item-hover" : "item-disabled-hover" ;
itemElem.on("clic",function(){
That._fnTriggerHandler(item["index"],item["text"],item["disabled"]) ;
})
.mouseover(function(){
That._addOrRemoveClass($(this),activeClass,true) ;
})
.mouseout(function(){
That._addOrRemoveClass($(this),activeClass,false) ;
}) ;
itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;

　

(4), résumé final

(1) Analyser raisonnablement les exigences fonctionnelles en utilisant la pensée orientée objet.

(2) Organiser notre logique de plug-in sous forme de classes.

(3) Reconstruire en continu l'exemple ci-dessus. Comment effectuer une reconstruction raisonnable ? Ne faites pas de conception excessive et soyez à l’aise avec cela. La méthode recommandée est de combiner la conception procédurale avec la conception orientée objet.

(4), les fonctions associées seront développées dans le prochain article, comme l'attribut "mode", qui prend en charge le mode multi-sélection des cases à cocher lorsqu'il est "1", mais maintenant ce n'est que le mode déroulant par défaut .

Regardez mon article, est-il bien meilleur que le code précédent ? Les amis devraient également réfléchir davantage et faire plus lorsqu'ils réalisent leurs propres projets, et essayer de rendre leur code plus raisonnable.