Tutorial pembangunan pemalam JavaScript (3)_kemahiran javascript

1, analisis pembukaan

Dalam dua artikel sebelumnya, kami terutamanya bercakap tentang "cara membangunkan pemalam menggunakan jQuery" dan cara untuk menggabungkan reka bentuk prosedur dengan reka bentuk berorientasikan objek

Cara mereka bentuk pemalam, kedua-dua kaedah mempunyai kelebihan dan kekurangannya sendiri. Anda boleh memutuskan cara menggunakannya dalam senario tertentu. Jadi bermula dari artikel ini hari ini, kami akan membawa anda melalui pembangunan perpustakaan pemalam anda sendiri dari cetek kepada mendalam dalam bentuk contoh. Hey hey hey, hentikan cakap bukan-bukan dan sampaikan pada intinya. Muat naik secara langsung pemaparan sebenar:

Seperti yang anda boleh lihat, ini ialah pemalam tab, yang mungkin kami hubungi apabila kami membuat aplikasi satu halaman ("SPA") setiap hari Ambil contoh hari ini,

Kami sedang membina sistem berdasarkan struktur BS, yang akan terdiri daripada beberapa modul, kesemuanya merupakan komponen sistem ini, kami boleh menguruskan modul kami dengan berkesan

Borang pengalaman dan interaktiviti pengguna

akan dianalisis 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:

bigbear.ui.createTab($("#tab"),{
​​buttonTeks: "Tambah modul" ,
Keputusan: [
             {
               teks: "Petua Panduan" ,
​​​​ url: "help.html",
showClose : "0" ,
status: "1"
           } ,
             {
               teks: "Maklumat Pelajar" ,
​​​​ url: "info.html",
              tunjuk Tutup: "1",
status: "1"
           } ,
             {
               teks: "Klasifikasi Pelajar" ,
  url: "category.html" ,
              tunjuk Tutup: "1",
status: "1"
           } ,
             {
                 teks: "Beruang Besar {{bb}}" ,
​​​​ url: "bb.html",
              tunjuk Tutup: "1",
status: "1"
           } ,
             {
               teks: "Modul ujian beta" ,
​​​​ url: "test.html",
showClose : "1" ,
status: "1"
         }
]
}) ;

"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" mewakili status pilihan, yang dibuka secara lalai dan mungkin ditutup, masing-masing: 1-terbuka, 0-ditutup.

(2), apakah fungsi yang terlibat

Jana secara dinamik entri pilihan yang berkaitan melalui parameter pilihan, seperti yang ditunjukkan dalam contoh berikut:

Salin kod Kod adalah seperti berikut:

bigbear.ui.createTab($("#tab"),{
butangTeks: "Tambah modul" ,
Keputusan: [
           {
              teks: "analisis kod sumber jQuery" ,
​​​​ url: "help.html",
showClose : "0" ,
status: "1"
          } ,
           {
               teks: "Beruang Besar {{bb}}}" ,
  url: "bb.html" ,
showClose : "1" ,
status: "1"
}
]
}) ;

Kesannya adalah seperti berikut:

Anda boleh menambah dan memadam pilihan entri secara bebas, seperti yang ditunjukkan di bawah:

Gambar di atas menunjukkan salah satu situasi Apabila tiada modul, mesej akan digesa.

Ini adalah kes kedua, data yang dipadamkan sebelum ini boleh dipulihkan.

(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文件代码

复制代码 代码如下:

.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;
}
.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 .item {
    ketinggian:32px;
    jidar-kiri:20px;
    lebar:540px;
    limpahan: tersembunyi;
    terapung : kiri;
}
.dxj-ui-bd #tab .title .item div {
    padding:0px;
    jidar-kiri:10px;
    lebar:96px;
    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），Js代码如下：

复制代码 代码如下:

$(fungsi(){
Bigbear.ui.createTab($("#tab"),{
​​​​buttonTeks: "Tambah modul",
hasil : [
                {
                 teks: "Petua Panduan",
                    url: "help.html",
showClose : "0" ,
status : "1"
              },
                {
                 teks: "Maklumat Pelajar",
                  url: "info.html",
                tunjuk Tutup: "1",
status : "1"
              },
                {
                teks: "Klasifikasi Pelajar",
                 url: "category.html",
                tunjuk Tutup: "1",
status : "1"
              },
                {
                  teks: "Beruang Besar {{bb}}" ,
  url: "bb.html" ,
                tunjuk Tutup: "1",
status : "1"
              },
                {
                  teks: "Modul ujian Beta" ,
                 url: "test.html",
                tunjuk Tutup: "1",
status : "1"
            }
]
}) ;
}) ;
(fungsi($){
var win = tetingkap ;
var bb = win.bigbear = win.bigbear ||         ui: {}
} ;
var ui = bb.ui = {} ;
var Tab = fungsi(elemen,pilihan){
This.elem = elem ;
This.opts = opts ;
} ;
var tabProto = Tab.prototype ;
tabProto._deleteItem = fungsi(item){
        var that = this ;
This.getElem().find(".title .items div")
        .eq(item["indeks"])
         .fadeOut(function(){
That._resetContent() ;
That._updateStatus(item) ;
That._triggerItem(item["index"] 1) ;
That.getElem().find(".title .adder").trigger("klik") ;
         }) ;
} ;
tabProto._triggerItem = fungsi(seterusnya){
        var nextStatus = this._getStatus(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._getStatus = function(index){
        var status = "" ;
        $.each(this.getOpts()["result"],function(i,item){
            if(index == item["index"]){
                status += item["status"] ;
                return false ;
            }
        }) ;
        return status ;
    } ;
    tabProto._updateStatus = function(item){
        var status = item["status"] ;
        item["status"] = ("1" == status) ? "0" : "1" ;
    } ;
    tabProto.init = function(){
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that._toggleConsolePanel(function(){
                var root = that.getElem().find(".console-panel").empty() ;
                $.each(that.getOpts()["result"],function(i,item){
                    if("0" == item["status"]){
                        var elem = $("

")
                        .data("item",item)
                        .appendTo(root) ;
                        $("").appendTo(elem) ;
                        $("").text(item["text"]).appendTo(elem) ;
                    }
                }) ;
                if(root.find("div").size()){
                    $("")
                    .on("klik",function(){
                        var data = root.find("input[type=radio]:checked").parent().data("item") ;
                        that._updateStatus(data) ;
                        that.getElem().find(".title .item div").eq(data["index"]).fadeIn().trigger("klik") ;
                        that.getElem().find(".title .adder").trigger("klik") ;
                    })
                    .appendTo(root) ;
                }
                lain{
                    root.text("暂无任何可添加的项目！") ;
                }
            }) ;
        }) ;
        $.each(this.getOpts()["hasil"],fungsi(i,item){
            item["indeks"] = i ;
            that._render(item) ;
        }) ;
        this.getElem().find(".title .item div")
        .eq(0)
        .trigger("klik"); // 假定是必须有一项，否则插件意义就不大了！
    } ;
    tabProto._toggleConsolePanel = fungsi(panggilan balik){
        this.getElem().find(".console-panel").slideToggle(function(){
            $.isFunction(panggilan balik) && panggil balik() ;
        }) ;
    } ;
    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._render = fungsi(data){
        var itu = ini ;
        var item = $("

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

（四），最后总结

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

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

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

 　  （4），思考一下上面例子中，选项卡中的选项是否可以独立成单例子中，选项卡中的选项是否可以独立成单例子中。么“Tab”类如何修改那？带着问题去思考吧。。。

🎜