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.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 } ;
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
    

    

        

            

                

                     添加学生信息
                

                

                    
                

                

                    

更多模块