Tutorial pembangunan pemalam JavaScript (6)_kemahiran javascript

1, analisis pembukaan

Apa yang perlu kita bincangkan dalam artikel hari ini? Hey hey hey. Kami akan meneruskan artikel sebelumnya untuk membina semula kekurangan dan menganalisisnya langkah demi langkah dengan cara yang mudah dan mudah difahami, supaya semua orang boleh mengalami proses penambahbaikan langkah demi langkah. Tanpa berlengah lagi, mari kita ke intinya. Mari kita semak dahulu

sebelumnya

Kod untuk bahagian Js adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

fungsi ItemSelector(elem,opts){
This.elem = elem ;
This.opts = opts ;
} ;
var ISProto = ItemSelector.prototype ;
ISProto.getElem = function(){
Kembalikan this.elem ;
} ;
ISProto.getOpts = function(){
Kembalikan this.opts ;
} ;
/* manip data*/
ISProto._setCurrent = fungsi(semasa){
This.getOpts()["current"] = semasa ;
} ;
ISProto.getCurrentValue = fungsi(semasa){
Kembalikan this.getOpts()["current"] ;
} ;
/* manip data*/
ISProto.init = function(){
var itu = ini ;
This.getOpts()["current"] = null ; // Kursor data
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()["item"],fungsi(i,item){
Item["id"] = (New Date().getTime()).toString() ;
That._render(item) ;
}) ;
} ;
ISProto._setItemValue = fungsi(nilai){
This.getElem().find(".title div").text(value)
} ;
ISProto._render = fungsi(item){
var itu = ini ;
var itemElem = $("

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

Kesannya adalah seperti di bawah:

　a)------Keadaan tidak boleh dikendalikan

b)------Status boleh beroperasi

(2), buka minda anda dan bina semula

Tidak sukar untuk melihat daripada kod bahawa ia telah disusun secara berkesan dalam cara berorientasikan objek melalui ciri tatabahasa "Js". banyak kekurangan tempat.

　(1), terdapat terlalu banyak kod berulang

(2), pembahagian tanggungjawab yang tidak jelas

(3), prosesnya tidak sempurna

Kami melaksanakan pembinaan semula yang berkesan berdasarkan perkara di atas Kami mesti menyusun keperluan komponen ini terlebih dahulu:

　(1), mulakan komponen konfigurasi

Salin kod Kod adalah seperti berikut:

$(fungsi(){
var itemSelector = new ItemSelector($("#item-selector"),{
           teks semasa: "Sila Pilih Item" ,
item: [
                 {
                   teks: "JavaScript" ,
                   nilai: "js" ,
Dilumpuhkan : "1"
                                                                                          {
                  teks: "Css" ,
                   nilai: "css" ,
Dilumpuhkan : "0"
                                                                                          {
                  teks: "Html" ,
                   nilai: "html" ,
Dilumpuhkan : "0"
            }
] ,
}) ;
itemSelector.init() ;
}) ;

Kod ini sangat jelas dan tidak memerlukan sebarang pengubahsuaian, tetapi anda boleh melanjutkan fungsi berdasarkan konfigurasi di atas, seperti menambah item konfigurasi "mod" untuk menyokong berbilang pilihan. Contohnya: "mod semak kotak semak".

Langkah seterusnya ialah melengkapkan logik permulaan, seperti berikut:

Salin kod Kod adalah seperti berikut:

ISProto.init = function(){

var itu = ini ;
This.getOpts()["current"] = null ; // Kursor data
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()["item"],fungsi(i,item){
Item["id"] = (New Date().getTime()).toString() ;
That._render(item) ;
}) ;
} ;

Terdapat banyak masalah dengan kod ini, tanggungjawabnya tidak jelas, dan logik permulaan termasuk pelaksanaan terperinci titik fungsi.

Mari teruskan melihat kod pemaparan:

Salin kod Kod adalah seperti berikut:

ISProto._render = fungsi(item){
var itu = ini ;
var itemElem = $("

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

Masalahnya adalah jelas Jika operasi berulang ditemui, mereka harus disarikan secara munasabah untuk mencapai tujuan penggunaan semula.

Keseluruhan proses pemasangan termasuk pemulaan, pemaparan (pengikatan peristiwa), serta kaedah pengendalian data yang berkaitan dan kaedah tambahan untuk operasi DOM.

Ringkasnya, selepas menyikat mudah, kita harus menetapkan tujuan operasi fungsi dan peruntukan tugas baris proses utama, dan semua orang harus bertanggungjawab untuknya.

Jadi tujuan pembinaan semula kita sangat jelas, kan! Ini bermakna abstraksi mata fungsi dan pembahagian tanggungjawab yang mesra Jadi bagaimana kita mencapainya?

Langkah pertama ialah mewujudkan kaedah fungsi proses: (antara muka kaedah)

Salin kod Kod adalah seperti berikut:

ISProto.init = function(){
// letakkan kod anda di sini !
} ;
ISProto._render = function(){
// letakkan kod anda di sini !
} ;

Bahagian kedua, mewujudkan antara muka kaedah abstrak:

Salin kod Kod adalah seperti berikut:

ISProto._fnItemSelectorDelegateHandler = function(){
// letakkan kod anda di sini !
} ;
ISProto._fnTriggerHandler = function(){
// letakkan kod anda di sini !
} ;
ISProto._addOrRemoveClass = function(){
// letakkan kod anda di sini !
} ;

Langkah ketiga ialah mewujudkan antara muka operasi data:

Salin kod Kod adalah seperti berikut:

ISProto._setCurrent = function(){
// letakkan kod anda di sini !
} ;
ISProto._getCurrent = function(){
// letakkan kod anda di sini !
} ;

Unten finden Sie auch einige vollständige Quellcodes, hier nur Ideen.

(3), vollständiger Code zum Lernen, dieser Code wurde getestet

Code kopieren Der Code lautet wie folgt:

Funktion ItemSelector(elem,opts){
This.elem = elem ;
This.opts = opts ;
This.current = -1; // Datencursor
} ;
var ISProto = ItemSelector.prototype ;
/* getter api*/
ISProto.getElem = function(){
Geben Sie this.elem zurück ;
} ;
ISProto.getOpts = function(){
Gibt this.opts zurück ;
} ;
ISProto._getCurrent = function(){
Gibt this.current zurück ;
} ;
/* getter api*/
/* Datenmanipulation*/
ISProto._setCurrent = function(current){
This.current = current ;
} ;
ISProto._setItemText = function(text){
This.getElem().find(".title div").text(text) ;
} ;
/* Datenmanipulation*/

/* Update am 31.01.2015 23:38 */
ISProto._fnTriggerHandler = function(index,text,value){
If(this._isDisabled(value)){
index = -1 ;
         text = this.getOpts()["currentText"] ;
}
This._setItemText(text) ;
This._setCurrent(index) ;
This.getElem().find(".content .items").hide() ;
} ;
ISProto._addOrRemoveClass = function(elem,className,addIs){
If(addIs){
           elem.addClass(className) ;
}
sonst{
          elem.removeClass(className) ;
}
} ;
ISProto._fnItemSelectorDelegateHandler = function(){
var that = this ;
This.getElem().on("click","[data-toggle]",function(){
That.getElem().find(".content .items").toggle() ;
}) ;
} ;
ISProto._isDisabled = Funktion(Wert){
Rückgabe ("1" == Wert) ? true : false ;
} ;
/* Update am 31.01.2015 23:38 */
ISProto.init = function(){
var that = this ;
This._fnItemSelectorDelegateHandler() ;
$.each(this.getOpts()["items"],function(i,item){
Item["index"] = i ;
That._render(item) ;
}) ;
This._fnTriggerHandler(this._getCurrent(),this.getOpts()["currentText"],"1") ;
} ;
ISProto._render = function(item){
var that = this ;
var itemElem = $("

").text(item["text"]).attr("id",item["index"]) ;
var activeClass = ("0" == item["disabled"]) ? "item-hover" : "item-disabled-hover" ;
itemElem.on("click",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), abschließende Zusammenfassung

(1) Analysieren Sie funktionale Anforderungen sinnvoll mit objektorientiertem Denken.

(2) Organisieren Sie unsere Plug-in-Logik in Form von Klassen.

(3) Rekonstruieren Sie das obige Beispiel kontinuierlich. Übertreiben Sie es nicht und machen Sie sich damit vertraut. Der empfohlene Weg besteht darin, prozedurales Design mit objektorientiertem Design zu kombinieren.

(4) Verwandte Funktionen werden im nächsten Artikel erweitert, z. B. das Attribut „mode“, das den Kontrollkästchen-Mehrfachauswahlmodus unterstützt, wenn es „1“ ist, aber jetzt ist es nur der Standard-Dropdown-Modus .

Sehen Sie sich meinen Artikel an. Ist er viel besser als der vorherige Code? Freunde sollten auch mehr nachdenken und mehr tun, wenn sie ihre eigenen Projekte durchführen, und versuchen, ihren Code vernünftiger zu gestalten.