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

1, Eröffnungsanalyse

Hallo, erinnerst du dich an den letzten Artikel? Es geht hauptsächlich darum, wie ein „Tab“-Plug-in Code organisiert und implementiert“ und wie prozedurales Design und objektorientiertes Design kombiniert werden

Beim Entwerfen eines Plug-Ins haben beide Methoden ihre eigenen Vor- und Nachteile. Diese Artikelserie ist lernorientiert. Sie können entscheiden, wie Sie es in bestimmten Szenarien verwenden. In diesem Artikel konzentrieren wir uns weiterhin auf die „Tab“-Instanz

Weitere Erweiterung verwandter Funktionen. Hey hey hey, hör auf, Unsinn zu reden und komm zum Punkt. Laden Sie die tatsächlichen Renderings direkt hoch:

Wie Sie sehen, wurde eine neue Funktion hinzugefügt. Wenn während der Initialisierung die Anzahl der Einträge in unseren Modulkonfigurationsinformationen größer ist als die von uns angegebene Anzahl, wird dies unter „Weitere Module“ angezeigt

In der ausgeblendeten Liste der Operationselemente wurde auch unsere Konfiguration der Initialisierungsparameter angepasst. Beispielsweise gibt es ein zusätzliches „displayMax“, um die Anzahl der Einträge während der Initialisierung anzugeben, und ein Projektattribut, „status“

Die unnötige Konfiguration wird auch während der Initialisierung entfernt. Die Konfiguration wird dynamisch im Programm generiert, was die Flexibilität des Programms erhöht.

(2), Beispielanalyse

(1), bestimmen Sie zunächst, was dieses Plug-in bewirkt. Werfen wir einen Blick auf den Aufruf des Plug-Ins und die Beschreibung der Konfigurationsparameter. Der folgende Code:

Code kopieren Der Code lautet wie folgt:

{
buttonText: „Modul hinzufügen“,
Ergebnis: [
           {
              text: „Guide-Tipps“,
​​​​​​ URL: „help.html“,
showClose: „0“
          } ,
           {
             text: „Studenteninformationen“ ,
​​​​​​ URL: „info.html“,
             showClose: "1"
          } ,
           {
              text: „Studentenklassifizierung“,
   URL: „category.html“,
             showClose: "1"
          } ,
           {
               Text: „Big Bear {{bb}}“ ,
   URL: „bb.html“,
             showClose: "1"
          } ,
           {
              text: „Beta-Testmodul“ ,
​​​​​​ URL: „test.html“,
             showClose: "1"
          } ,
           {
             Text: „Three Fatty“ ,
​​​​​​ URL: „help.html“,
             showClose: "1"
          } ,
           {
             Text: „Vier kahlköpfige Männer“ ,
​​​​​​ URL: „help.html“,
             showClose: "1"
}
] ,
displayMax: 5 // Maximal angezeigte Elemente
} 

„bigbear.ui.createTab“ enthält zwei Parameter, der erste ist das Dom-Knotenobjekt und der zweite ist die Plug-in-Parameteroption „buttonText“, die die Textbeschreibung der Bedienschaltfläche im „Tab“-Plug darstellt -In.

„result“ ist ein Array, das die Eigenschaften des Tab-Elements enthält, einschließlich einer Textbeschreibung und der URL, die zum Senden von Anfragen beim Klicken auf das Tab-Element verwendet wird. „showClose“ gibt an, ob die Tab-Option eine Schaltfläche zum Schließen anzeigt.

„Status“ wird bei der Initialisierung ebenfalls entfernt und erfordert keine Konfiguration. Die Konfiguration wird dynamisch im Programm generiert. Es kann einen geschlossenen Zustand geben, der wie folgt ausgedrückt wird: 1 – Standardanzeige, 0 – geschlossener Zustand, 2 – die Standardanzahl der Einträge überschritten.

(2), die Funktion wird Schritt für Schritt eingeführt

1---, initialisieren Sie das Plug-in über optionale Parameter:

Code kopieren Der Code lautet wie folgt:

$(function(){
Bigbear.ui.createTab($("#tab"),{
​​​​buttonText: „Modul hinzufügen“,
Ergebnis: [
                {
                 text: „Guide Tips“ ,
                   URL: „help.html“,
showClose: „0“
              },
                {
                 Text: „Studenteninformationen“,
                  URL: „info.html“,
showClose: „1“
              },
                {
                Text: „Studentenklassifizierung“,
                   URL: „category.html“,
showClose: „1“
              },
                {
                  Text: „Big Bear {{bb}}“ ,
   URL: „bb.html“,
showClose: „1“
              },
                {
                  text: „Beta-Testmodul“ ,
                 URL: „test.html“,
showClose: „1“
              },
                {
                Text: „Three Fatty“ ,
                   URL: „help.html“,
showClose: „1“
              },
                {
                                                                                                                                                                                                                  Text: „Vier kahlköpfige Männer“,
                   URL: „help.html“,
showClose: „1“
            }
] ,
          displayMax: 5 // Maximal angezeigte Elemente
}) ;
}) ;                  

2---, Rendern und Vervollständigen der Zeitbindung und der zugehörigen Geschäftslogik, z. B. Überprüfung der Anzahl der Einträge während der Initialisierung.

Code kopieren Der Code lautet wie folgt:

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") ;
        }
        sonst{
            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") ;
                            }) ;
                        }
                        sonst{
                            Alert("不能添加任何模块，目前已经是最大数量！") ;
                        }
                    })
                    .appendTo(root) ;
                }) ;
                root.toggle() ;
            }) ;
           
        });
    }
    this.getElem().find(".title .items div")
    .eq(0)
    .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
} ;

3---, Tab-Wechsel und Dateninhalt-Rendering-Vorgänge.

Code kopieren Der Code lautet wie folgt:

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

Code kopieren Der Code lautet wie folgt:

item.on("click",function(){
That._setCurrent($(this).index()) ;
That._getContent(data["url"]).done(function(result){
That._setContent(result) ;
})
.fail(function(){
            throw new Error("Net Error !") ;
});
})

Code kopieren Der Code lautet wie folgt:

tabProto._setContent = function(html){
This.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = function(url){
Geben Sie $.ajax({
zurück   URL: URL
}) ;
} ;

4---, die Kernoperationsmethode für Hilfsdaten, beinhaltet kein DOM.

Code kopieren Der Code lautet wie folgt:

/* Aktualisierungszeit 2015 26.01. 15:36 */
tabProto._isDisplayMax = function(size){
var displayMax = this.getOpts()["displayMax"] || 5 ;
Rückgabe (Größe <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
If(!this.getOpts()["result"].length){
          return false ;
}
Gibt true zurück ;
} ;
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);
         }
}) ;
Rückgabeliste ;
} ;
tabProto._getStatusByIndex = function(index){
var status = null ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
If(index == item["index"]){
status = item["status"] ;
         }
}) ;
Rückgabestatus ;
} ;

(3), vollständiger Code zum Lernen , dieser Code wurde getestet, einschließlich der Verzeichnisstruktur und zugehörigen Dateien.

　1,html

Code kopieren Der Code lautet wie folgt:

 
    

         大熊君{{bb}} – DXJ-Benutzeroberfläche ------ Tab
    

    

        

            

                

                     添加学生信息
                

                

                    
                

                

                    

更多模块

                    

                        
                    

                

            

            

            

            

                
            

        

    

 

2, CSS

Code kopieren Der Code lautet wie folgt:

 .dxj-ui-hd {
     padding:0px ;
     Rand: 0 automatisch;
     margin-top:30px;
     Breite:780px;
     Höhe:60px;
     Zeilenhöhe: 60px;
     Hintergrund: #3385ff;
     Farbe:#fff;
     Schriftfamilie: „微软雅黑“ ;
     Schriftgröße: 28px;
     text-align: center;
     Schriftstärke:bold;
 }
 .dxj-ui-bd {
     padding:0px ;
     Rand: 0 automatisch;
     Breite:778px;
     padding-top: 30px ;
     Polsterung unten: 30px ;
     Überlauf: versteckt;
     border:1px solid #3385ff;
 }
 .dxj-ui-bd #tab {
     padding:0px ;
     Rand: 0 automatisch;
     Breite:720px;
     Überlauf: versteckt;
     position:relativ;
 }
 .dxj-ui-bd #tab .title {
     Breite:720px;
     Überlauf: versteckt;
     border-bottom:2px solid #3385ff;
 }
 .dxj-ui-bd #tab .title .adder {
     Breite:160px;
     Höhe:32px;
     Zeilenhöhe: 32px;
     Hintergrund: #DC143C;
     Farbe:#fff;
     Schriftfamilie: „微软雅黑“ ;
     Schriftgröße: 14px;
     text-align: center;
     Schriftstärke:bold;
     float: links;
     Cursor:Zeiger;
 }
 .dxj-ui-bd #tab .title .more-mod {
     Überlauf:versteckt;
     border:1px solid #DC143C;
     Breite:70px;
     Position:absolut;
     rechts:0;
     margin-right:6px;
     display:none;
 }
 .dxj-ui-bd #tab .title .more-mod .tag{
     Höhe:32px;
     Zeilenhöhe:32px;
     Breite:70px;
     Hintergrund: #DC143C;
     Farbe:#fff;
     Schriftfamilie: arial ;
     Schriftgröße: 12px;
     text-align: center;
     Cursor:Zeiger;
 }
 .dxj-ui-bd #tab .title .more-mod .mods {
     Überlauf:versteckt;
     Breite:70px;
     display:none;
 }
 .dxj-ui-bd #tab .title .more-mod .mods div {
     Höhe:24px;
     Zeilenhöhe:24px;
     Breite:62px;
     Schriftfamilie: arial ;
     Schriftgröße: 12px;
     Cursor:Zeiger;
     padding-left:10px;
 }
 .dxj-ui-bd #tab .title .items {
     Höhe:32px;
 
     Breite:480px;
     Überlauf: versteckt;
     float: links;
 }
 .dxj-ui-bd #tab .title .items div {
     padding:0px;
     margin-left:10px;
     Breite:84px;
     Höhe:32px;
     Zeilenhöhe: 32px;
     Hintergrund: #3385ff;
     Farbe:#fff;
     Schriftfamilie: arial ;
     Schriftgröße: 12px;
     text-align: center;
     position:relativ;
     float: links;
     Cursor:Zeiger;
 }
 .dxj-ui-bd #tab .title .items div span.del {
     Breite:16px;
     Höhe:16px;
     Zeilenhöhe: 16px;
     display:block;
     Hintergrund: #DC143C;
     Position:absolut;
     rechts:0 ;
     oben:0;
     Cursor:Zeiger;
 }
 .dxj-ui-bd #tab .content {
     Breite:716px;
     padding-top:30px;
     Überlauf: versteckt;
     border:2px solid #3385ff;
     border-top:0px;
     min-height:130px;
     text-align:center;
 }
 .dxj-ui-bd #tab .content table {
     Rand: 0 automatisch;
 }
 .dxj-ui-bd #tab .content div.c {
     padding-top: 20px ;
     padding-left:20px;
     Hintergrund:#eee;
     Höhe:140px;
 }
 .dxj-ui-bd #tab .content div.c .input-content {
     Rand oben: 10px ;
     Schriftfamilie: arial ;
     Schriftgröße: 12px;
 }
 .dxj-ui-bd #tab .console-panel {
     Breite:716px;
     padding-top:20px;
     padding-bottom:20px;
     Überlauf: versteckt;
     border:2px solid #3385ff;
     border-top:0px;
     border-bottom:2px solid #3385ff;
     Hintergrund:#fff;
     display:none;
 }
 
 .aktiv {
     Schriftstärke: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("click",function(){
                var data = root.find("input[type=radio]:checked").data("item") ;
                if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                    that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                        that._saveOrUpdateStatus(data,"1") ;
                    })
                    .trigger("click") ;
                }
                sonst{
                    that._saveOrUpdateStatus(data,"2") ;
                }
                that.getElem().find(".title .adder").trigger("click") ;
            })
            .appendTo(root) ;
        }
        sonst{
            root.text("暂无任何可添加的项目！") ;
        }
    } ;
    /* Aktualisierungszeit 2015 26.01. 15:36 */ 
    tabProto._setCurrent = function(index){
        var items = this.getElem().find(".title .items div").removeClass("active") ;
        items.eq(index).addClass("active") ;
        var content = this.getElem().find(".content .c").hide() ;
        content.eq(index).show() ;
    } ;
    tabProto.getElem = function(){
        gib this.elem zurück ;
    } ;
    tabProto.getOpts = function(){
        return this.opts ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = function(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = function(url){
        return $.ajax({
            URL: URL
        }) ;
    } ;
    tabProto._deleteItem = function(elem){
        var that = this ;
        this.getElem().find(".title .items 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().find(".title .items")) ;
        data["index"] = item.index() ;
        item.on("click",function(){
            that._setCurrent($(this).index()) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(result) ;
            })
            .fail(function(){
                throw new Error("Net Error !") ;
            });
        })
        .data("item",data) ;
        if("2" == data["status"]){
            item.hide() ;
        }
        if("1" == data["showClose"]){
            $("X")
            .on("click",function(){
                if(win.confirm("是否删除此项？")){
                    that._deleteItem(item) ;
                    return false ; // 阻止冒泡
                }
            })
            .appendTo(item) ;
        }
    } ;
    ui.createTab = function(elem,opts){
        var tab = new Tab(elem,opts) ;
        tab.init() ;
        Return-Tab ;
    } ;   
})(jQuery) ;

　　

(四），最后总结

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

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

　　（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合.