Tutorial pembangunan pemalam JavaScript (4)_kemahiran javascript

1, analisis pembukaan

Hai, adakah anda masih ingat artikel yang lepas? Ia terutamanya bercakap tentang cara pemalam "Tab" mengatur kod dan melaksanakannya", dan cara menggabungkan reka bentuk prosedur dan reka bentuk berorientasikan objek

Cara mereka bentuk pemalam, kedua-dua kaedah mempunyai kelebihan dan kekurangannya sendiri. Anda boleh memutuskan cara menggunakannya dalam senario tertentu. Dalam artikel ini, kami masih menumpukan pada contoh "Tab",

Teruskan mengembangkan fungsi yang berkaitan. Hey hey hey, hentikan cakap bukan-bukan dan sampaikan pada intinya. Muat naik secara langsung pemaparan sebenar:

Seperti yang anda lihat, fungsi baharu telah ditambah Jika semasa pemulaan, bilangan entri dalam item maklumat konfigurasi modul kami lebih besar daripada yang kami nyatakan, ia akan dipaparkan dalam "Lebih Banyak Modul"

Dalam senarai tersembunyi item operasi, konfigurasi parameter permulaan kami juga telah dilaraskan Contohnya, terdapat "displayMax" tambahan untuk menentukan bilangan entri semasa pemulaan dan atribut projek, "status"

.

Konfigurasi yang tidak diperlukan juga dialih keluar semasa pemulaan Konfigurasi dijana secara dinamik dalam atur cara, yang meningkatkan fleksibiliti program Mari kita menganalisisnya secara terperinci di bawah.

(2), contoh analisis

(1), tentukan dahulu perkara yang dilakukan pemalam ini. Mari kita lihat cara pemalam dipanggil dan perihalan parameter konfigurasi. Kod berikut:

Salin kod Kod adalah seperti berikut:

{
butangTeks: "Tambah modul" ,
Keputusan: [
           {
               teks: "Petua Panduan",
​​​​ url: "help.html",
showClose : "0"
          } ,
           {
              teks: "Maklumat Pelajar" ,
​​​​ url: "info.html",
showClose : "1"
          } ,
           {
              teks: "Klasifikasi Pelajar" ,
  url: "category.html" ,
showClose : "1"
          } ,
           {
               teks: "Beruang Besar {{bb}}" ,
  url: "bb.html" ,
showClose : "1"
          } ,
           {
              teks: "Modul ujian Beta" ,
​​​​ url: "test.html",
showClose : "1"
          } ,
           {
             teks: "Tiga Berlemak" ,
​​​​ url: "help.html",
showClose : "1"
          } ,
           {
              teks: "Empat Lelaki Botak" ,
​​​​ url: "help.html",
             tunjuk Tutup: "1"
}
] ,
displayMax : 5 // Item paparan maksimum
} 

"bigbear.ui.createTab" mengandungi dua parameter, yang pertama ialah objek nod dom, dan yang kedua ialah pilihan parameter pemalam "buttonText" mewakili penerangan teks butang operasi dalam palam "Tab". -dalam.

"hasil" ialah tatasusunan, yang mengandungi sifat item tab, termasuk perihalan teks, URL yang digunakan untuk membuat permintaan apabila mengklik item tab, "tunjukkanTutup" mewakili sama ada pilihan tab memaparkan butang tutup.

"status" juga dialih keluar semasa pemulaan dan tidak memerlukan konfigurasi Konfigurasi dijana secara dinamik dalam program. Mungkin terdapat keadaan tertutup, yang dinyatakan sebagai: 1-paparan lalai, 0-keadaan tertutup, 2-melebihi bilangan lalai entri.

(2), fungsi ini diperkenalkan langkah demi langkah

1---, melalui parameter pilihan, mulakan pemalam:

Salin kod Kod adalah seperti berikut:

$(fungsi(){
Bigbear.ui.createTab($("#tab"),{
​​​​buttonTeks: "Tambah modul",
hasil : [
                {
                 teks: "Petua Panduan",
                 url: "help.html",
showClose: "0"
              },
                {
                 teks: "Maklumat Pelajar",
                  url: "info.html",
showClose: "1"
              },
                {
                teks: "Klasifikasi Pelajar",
                 url: "category.html",
showClose: "1"
              },
                {
                  teks: "Beruang Besar {{bb}}" ,
  url: "bb.html" ,
showClose: "1"
              },
                {
                  teks: "Modul ujian Beta" ,
                 url: "test.html",
showClose: "1"
              },
                {
                teks: "Tiga Berlemak" ,
                   url: "help.html",
showClose: "1"
              },
                {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               teks: "Empat Lelaki Botak" ,
                    url: "help.html",
showClose: "1"
            }
] ,
          paparanMaks: 5 // Item dipaparkan maksimum
}) ;
}) ;                 

2---, render dan lengkapkan masa mengikat dan logik perniagaan yang berkaitan, seperti pengesahan bilangan entri semasa permulaan.

Salin kod Kod adalah seperti berikut:

tabProto.init = function(){
    jika(ini._isEmptyResult()){
        this._setContent("暂无任何模块!") ;
    }
    var itu = ini ;
    this.getElem().find(".title .adder")
    .text(" " this.getOpts()["buttonText"])
    .on("klik",function(){
        that.getElem().find(".console-panel").slideToggle(function(){
            that._renderConsolePanel("0") ;
        }) ;
    }) ;
    $.each(this.getOpts()["hasil"],fungsi(i,item){
        jika(itu._isDisplayMax(i 1)){
            that._saveOrUpdateStatus(item,"1") ;
        }
        lain{
            that._saveOrUpdateStatus(item,"2") ;
        }
        that._render(item) ;
    }) ;
    if(!that._isDisplayMax(this.getOpts()["result"].length)){
        this.getElem().find(".title .more-mod").fadeIn(function(){
            $(this).cari(".tag").on("klik",fungsi(){
                var root = $(this).next() ;
                root.empty() ;
                $.each(that._getItemListByStatus("2"),function(i,data){
                    $("

").teks(data["teks"])
                    .on("klik",function(){
                        if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                            that.getElem().find(".title .item div").eq(data["index"]).fadeIn(function(){
                                that._saveOrUpdateStatus(data,"1") ;
                            }) ;
                        }
                        lain{
                            makluman("不能添加任何模块，目前已经是最大数量！") ;
                        }
                    })
                    .appendTo(root) ;
                }) ;
                root.toggle() ;
            }) ;
           
        });
    }
    this.getElem().find(".title .item div")
    .eq(0)
    .trigger("klik"); // 假定是必须有一项，否则插件意义就不大了！
} ;

3---, penukaran tab dan operasi pemaparan kandungan data.

Salin kod Kod adalah seperti berikut:

tabProto._setCurrent = fungsi(indeks){
var item = this.getElem().find(".title .items div").removeClass("active") ;
items.eq(index).addClass("active") ;
var contents = this.getElem().find(".content .c").hide() ;
contents.eq(index).show() ;
} ;  

Salin kod Kod adalah seperti berikut:

item.on("klik",function(){
That._setCurrent($(this).index()) ;
That._getContent(data["url"]).done(function(result){
That._setContent(result) ;
})
.fail(function(){
            buang Ralat baharu("Ralat Bersih !") ;
});
})

Salin kod Kod adalah seperti berikut:

tabProto._setContent = function(html){
This.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = function(url){
Kembalikan $.ajax({
  url: url
}) ;
} ;

4---, kaedah pengendalian data tambahan teras, tidak melibatkan DOM.

Salin kod Kod adalah seperti berikut:

/* masa kemas kini 2015 1/26 15:36 */
tabProto._isDisplayMax = fungsi(saiz){
var displayMax = this.getOpts()["displayMax"] || 5 ;
Pulangan (saiz <= displayMax) ? benar : palsu ;
} ;
tabProto._isEmptyResult = function(){
Jika(!this.getOpts()["hasil"].panjang){
          return false ;
}
Kembali benar ;
} ;
tabProto._saveOrUpdateStatus = fungsi(item,status){
Item["status"] = status ;
} ;
tabProto._getItemListByStatus = fungsi(status){
senarai var = [] ;
var result = this.getOpts()["result"] ;
$.each(hasil,fungsi(i,item){
Jika(status == item["status"]){
              list.push(item);
         }
}) ;
Kembalikan senarai ;
} ;
tabProto._getStatusByIndex = fungsi(indeks){
status var = null ;
var result = this.getOpts()["result"] ;
$.each(hasil,fungsi(i,item){
Jika(indeks == item["indeks"]){
status = item["status"] ;
         }
}) ;
Kembalikan status ;
} ;

(3), kod lengkap untuk pembelajaran , kod ini telah diuji, termasuk struktur direktori dan fail berkaitan.

　1,html

Salin kod Kod adalah seperti berikut:

 
    

         大熊君{{bb}} - UI DXJ ------ Tab
    

    

        

            

                

                     添加学生信息
                

                

                    
                

                

                    

更多模块

                    

                        
                    

                

            

            

            

            

                
            

        

    

 

2, css

Salin kod Kod adalah seperti berikut:

 .dxj-ui-hd {
     padding:0px ;
     margin : 0 auto;
     jidar atas:30px;
     lebar:780px;
     ketinggian:60px;
     ketinggian garis: 60px;
     latar belakang: #3385ff;
     warna:#fff;
     font-family: "微软雅黑" ;
     saiz fon: 28px;
     penjajaran teks: tengah;
     font-weight:bold;
 }
 .dxj-ui-bd {
     padding:0px ;
     margin : 0 auto;
     lebar:778px;
     padding-top : 30px ;
     padding-bottom : 30px ;
     limpahan: tersembunyi;
     sempadan:1px pepejal #3385ff;
 }
 .dxj-ui-bd #tab {
     padding:0px ;
     margin : 0 auto;
     lebar:720px;
     limpahan: tersembunyi;
     jawatan:saudara;
 }
 .dxj-ui-bd #tab .title {
     lebar:720px;
     limpahan: tersembunyi;
     sempadan-bawah:2px pepejal #3385ff;
 }
 .dxj-ui-bd #tab .tajuk .penambah {
     lebar:160px;
     ketinggian:32px;
     ketinggian garis: 32px;
     latar belakang: #DC143C;
     warna:#fff;
     font-family: "微软雅黑" ;
     saiz fon: 14px;
     penjajaran teks: tengah;
     font-weight:bold;
     terapung : kiri;
     kursor:penunjuk;
 }
 .dxj-ui-bd #tab .title .more-mod {
     limpahan:tersembunyi;
     sempadan:1px pepejal #DC143C;
     lebar:70px;
     kedudukan:mutlak;
     betul:0;
     jidar-kanan:6px;
     paparan:tiada;
 }
 .dxj-ui-bd #tab .title .more-mod .tag{
     ketinggian:32px;
     ketinggian garis:32px;
     lebar:70px;
     latar belakang: #DC143C;
     warna:#fff;
     font-family: arial ;
     saiz fon: 12px;
     penjajaran teks: tengah;
     kursor:penunjuk;
 }
 .dxj-ui-bd #tab .title .more-mod .mods {
     limpahan:tersembunyi;
     lebar:70px;
     paparan:tiada;
 }
 .dxj-ui-bd #tab .title .more-mod .mods div {
     ketinggian:24px;
     ketinggian garis:24px;
     lebar:62px;
     font-family: arial ;
     saiz fon: 12px;
     kursor:penunjuk;
     padding-left:10px;
 }
 .dxj-ui-bd #tab .title .item {
     ketinggian:32px;
 
     lebar:480px;
     limpahan: tersembunyi;
     terapung : kiri;
 }
 .dxj-ui-bd #tab .title .item div {
     padding:0px;
     jidar-kiri:10px;
     lebar:84px;
     ketinggian:32px;
     ketinggian garis: 32px;
     latar belakang: #3385ff;
     warna:#fff;
     font-family: arial ;
     saiz fon: 12px;
     penjajaran teks: tengah;
     jawatan:saudara;
     terapung : kiri;
     kursor:penunjuk;
 }
 .dxj-ui-bd #tab .title .items div span.del {
     lebar:16px;
     ketinggian:16px;
     ketinggian garis: 16px;
     paparan:blok;
     latar belakang: #DC143C;
     kedudukan:mutlak;
     betul:0 ;
     atas:0;
     kursor:penunjuk;
 }
 .dxj-ui-bd #tab .kandungan {
     lebar:716px;
     padding-top:30px;
     limpahan: tersembunyi;
     sempadan:2px pepejal #3385ff;
     atas sempadan:0px;
     ketinggian min:130px;
     text-align:center;
 }
 .dxj-ui-bd #tab .jadual kandungan {
     margin : 0 auto ;
 }
 .dxj-ui-bd #tab .content div.c {
     padding-top : 20px ;
     padding-left:20px;
     latar belakang:#eee;
     ketinggian:140px;
 }
 .dxj-ui-bd #tab .content div.c .input-content {
     jidar atas : 10px ;
     font-family: arial ;
     saiz fon: 12px;
 }
 .dxj-ui-bd #tab .panel-konsol {
     lebar:716px;
     padding-top:20px;
     padding-bottom:20px;
     limpahan: tersembunyi;
     sempadan:2px pepejal #3385ff;
     atas sempadan:0px;
     sempadan-bawah:2px pepejal #3385ff;
     latar belakang:#fff;
     paparan:tiada;
 }
 
 .aktif {
     font-weight:bold ;
 }

3,bigbear.js

复制代码 代码如下:

(function($){
    var win = window ;
    var bb = win.bigbear = win.bigbear || {
        ui : {}
    } ;
    var ui = bb.ui = {} ;
    var Tab = function(elem,opts){
        this.elem = elem ;
        this.opts = opts ;
    } ;
    var tabProto = Tab.prototype ;
    /* update time 2015 1/26 15:36 */
    tabProto._isDisplayMax = function(size){
        var displayMax = this.getOpts()["displayMax"] || 5 ;
        return (size <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
if(!this.getOpts()["result"].length){
return false ;
}
return true ;
} ;
tabProto._saveOrUpdateStatus = function(item,status){
item["status"] = status ;
} ;
tabProto._getItemListByStatus = function(status){
var list = [] ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(status == item["status"]){
list.push(item) ;
}
}) ;
return list ;
} ;
tabProto._getStatusByIndex = function(index){
var status = null ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(index == item["index"]){
status = item["status"] ;
}
}) ;
return status ;
} ;
tabProto._renderConsolePanel = function(status){
var that = this ;
var root = that.getElem().find(".console-panel") ;
this._resetConsolePanel() ;
$.each(that._getItemListByStatus(status),function(i,item){
var elem = $("

").appendTo(root) ;
            $("")
            .data("item",item)
            .appendTo(elem) ;
            $("").text(item["text"]).appendTo(elem) ;
        }) ;
        if(root.find("div").size()){
            $("")
            .on("klik",function(){
                var data = root.find("input[type=radio]:checked").data("item") ;
                if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                    that.getElem().find(".title .item div").eq(data["index"]).fadeIn(function(){
                        that._saveOrUpdateStatus(data,"1") ;
                    })
                    .trigger("klik") ;
                }
                lain{
                    that._saveOrUpdateStatus(data,"2") ;
                }
                that.getElem().find(".title .adder").trigger("klik") ;
            })
            .appendTo(root) ;
        }
        lain{
            root.text("暂无任何可添加的项目！") ;
        }
    } ;
    /* masa kemas kini 2015 1/26 15:36 */ 
    tabProto._setCurrent = fungsi(indeks){
        var item = this.getElem().find(".title .items div").removeClass("active") ;
        items.eq(index).addClass("active") ;
        var contents = this.getElem().find(".content .c").hide() ;
        contents.eq(index).show() ;
    } ;
    tabProto.getElem = function(){
        kembalikan this.elem ;
    } ;
    tabProto.getOpts = function(){
        kembalikan this.opts ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = function(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = function(url){
        pulangkan $.ajax({
            url : url
        }) ;
    } ;
    tabProto._deleteItem = fungsi(elemen){
        var itu = ini ;
        this.getElem().find(".title .item div")
        .eq(elem.index())
        .fadeOut(function(){
            that._resetContent() ;
            that._saveOrUpdateStatus(elem.data("item"),"0") ;
            that._triggerItem(elem.index() + 1) ;
        }) ;
    } ;
    tabProto._triggerItem = function(next){
        var nextStatus = this._getStatusByIndex(next) ;
        var items = this.getElem().find(".title .items div") ;
        next = items.eq(next) ;
        if(next.size() && "1" == nextStatus){ //后继dom节点存在
            next.trigger("click") ;
        }
        else{
            items.eq(0).trigger("click") ;
        }
    } ;
    tabProto._resetConsolePanel = function(){
        this.getElem().find(".console-panel").empty() ;
    } ;
    tabProto.init = function(){
        if(this._isEmptyResult()){
            this._setContent("暂无任何模块!") ;
        }
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that.getElem().find(".console-panel").slideToggle(function(){
                that._renderConsolePanel("0") ;
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            if(that._isDisplayMax(i + 1)){
                that._saveOrUpdateStatus(item,"1") ;
            }
            else{
                that._saveOrUpdateStatus(item,"2") ;
            }
            that._render(item) ;
        }) ;
        if(!that._isDisplayMax(this.getOpts()["result"].length)){
            this.getElem().find(".title .more-mod").fadeIn(function(){
                $(this).find(".tag").on("click",function(){
                    var root = $(this).next() ;
                    root.empty() ;
                    $.each(that._getItemListByStatus("2"),function(i,data){
                        $("

").text(data["text"])
                        .on("click",function(){
                            if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                                that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                                    that._saveOrUpdateStatus(data,"1") ;
                                }) ;
                            }
                            else{
                                alert("不能添加任何模块，目前已经是最大数量！") ;
                            }
                        })
                        .appendTo(root) ;
                    }) ;
                    root.toggle() ;
                }) ;
                
            });
        }
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
    } ;
    tabProto._render = function(data){
        var that = this ;
        var item = $("

").text(data["text"]).appendTo(this.getElem().cari(".tajuk .item")) ;
        data["index"] = item.index() ;
        item.on("klik",function(){
            that._setCurrent($(this).index()) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(result) ;
            })
            .fail(function(){
                buang Ralat baharu("Ralat Bersih !") ;
            });
        })
        .data("item",data) ;
        if("2" == data["status"]){
            item.hide() ;
        }
        if("1" == data["showClose"]){
            $("X")
            .on("klik",function(){
                if(win.confirm("是否删除此项？")){
                    that._deleteItem(item) ;
                    kembali palsu; // 阻止冒泡
                }
            })
            .appendTo(item) ;
        }
    } ;
    ui.createTab = fungsi(elemen,pilihan){
        var tab = Tab baharu(elem,opts) ;
        tab.init() ;
        tab kembali ;
    } ;   
})(jQuery) ;

　　

（四），最后总结

　　（1），面向对象的思考方式合理分析功能需求。

　　（2），以类的方式来组织我们的插件逻辑。

　　（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，中文我计过度式是过程化设计与面向对象思想设计相结合。