Tutorial zur Entwicklung von JavaScript-Plug-Ins (3)_Javascript-Kenntnisse-js-Tutorial-php.cn

1, Eröffnungsanalyse

In den beiden vorherigen Artikeln haben wir hauptsächlich darüber gesprochen, „wie man Plug-Ins mit jQuery entwickelt“ und wie man prozedurales Design mit objektorientiertem Design kombiniert

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. Ausgehend von diesem Artikel werden wir Sie heute anhand von Beispielen durch die Entwicklung Ihrer eigenen Plug-In-Bibliothek führen, von oberflächlich bis tief. Hey hey hey, hör auf, Unsinn zu reden und komm zum Punkt. Laden Sie die tatsächlichen Renderings direkt hoch:

Wie Sie sehen, handelt es sich um ein Tab-Plug-in, mit dem wir täglich in Berührung kommen können, wenn wir Single-Page-Anwendungen („SPA“) erstellen. Nehmen Sie das heutige Beispiel,

Wir bauen ein System auf, das aus mehreren Modulen besteht. Sie sind alle Komponenten des Systems. Durch dieses Plug-in können wir unsere Module effektiv verwalten Die Erlebnisform und Benutzerinteraktivität von

werden im Folgenden detailliert analysiert.

(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:

bigbear.ui.createTab($("#tab"),{
buttonText: „Modul hinzufügen“,
Ergebnis: [
            {
               text: „Guide Tips“ ,
URL: „help.html“,
showClose: „0“,
Status: „1“
           } ,
            {
               text: „Studenteninformationen“ ,
URL: „info.html“,
showClose: „1“,
Status: „1“
           } ,
            {
               text: „Studentenklassifizierung“,
URL: „category.html“,
showClose: „1“,
Status: „1“
           } ,
            {
                 Text: „Big Bear {{bb}}“ ,
URL: „bb.html“,
showClose: „1“,
Status: „1“
           } ,
            {
              text: „Beta-Testmodul“ ,
URL: „test.html“,
showClose: „1“,
Status: „1“
         }
]
}) ;

„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“ stellt den Status der Option dar, die standardmäßig offen ist und geschlossen sein kann: 1-offen, 0-geschlossen.

(2), welche Funktionen sind beteiligt

Generieren Sie relevante Optionseinträge dynamisch über optionale Parameter, wie im folgenden Beispiel gezeigt:

Code kopieren Der Code lautet wie folgt:

bigbear.ui.createTab($("#tab"),{

buttonText: „Modul hinzufügen“,

Ergebnis: [ 

           {

              text: „jQuery-Quellcode-Analyse“,

​​​​​​ URL: „help.html“,

showClose: „0“,

Status: „1“

          } ,

           {

                Text: „Big Bear {{bb}}}“ ,

﻿ ﻿ ﻿ URL: „bb.html“,

showClose: „1“,

Status: „1“

}

]

}) ;

Der Effekt ist wie folgt:

Sie können Eingabeoptionen frei hinzufügen und löschen, wie unten gezeigt:

Das Bild oben zeigt eine der Situationen. Wenn kein Modul vorhanden ist, wird eine Meldung angezeigt.

Dies ist der zweite Fall, zuvor gelöschte Daten können wiederhergestellt werden.

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

复制代码代码如下:

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

}

.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 .items {

    Höhe:32px;

    margin-left:20px;

    Breite:540px;

    Überlauf: versteckt;

    float: links;

}

.dxj-ui-bd #tab .title .items div {

    padding:0px;

    margin-left:10px;

    Breite:96px;

    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），Js代码如下：

复制代码代码如下:

$(function(){
Bigbear.ui.createTab($("#tab"),{
buttonText: „Modul hinzufügen“,
Ergebnis: [
                {
                 text: „Guide Tips“ ,
                   URL: „help.html“,
                showClose: "0",
Status: „1“
              },
                {
                 Text: „Studenteninformationen“,
                  URL: „info.html“,
                showClose: "1",
Status: „1“
              },
                {
                Text: „Studentenklassifizierung“,
                   URL: „category.html“,
                showClose: "1",
Status: „1“
              },
                {
                  Text: „Big Bear {{bb}}“ ,
URL: „bb.html“,
                showClose: "1",
Status: „1“
              },
                {
                  text: „Beta-Testmodul“ ,
                 URL: „test.html“,
                showClose: "1",
Status: „1“
            }
]
}) ;
}) ;
(Funktion($){
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 ;
tabProto._deleteItem = function(item){
var that = this ;
This.getElem().find(".title .items div")
        .eq(item["index"])
         .fadeOut(function(){
That._resetContent() ;
That._updateStatus(item) ;
That._triggerItem(item["index"] 1) ;
That.getElem().find(".title .adder").trigger("click") ;
         }) ;
} ;
tabProto._triggerItem = function(next){
        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("click",function(){
                        var data = root.find("input[type=radio]:checked").parent().data("item") ;
                        that._updateStatus(data) ;
                        that.getElem().find(".title .items div").eq(data["index"]).fadeIn().trigger("click") ;
                        that.getElem().find(".title .adder").trigger("click") ;
                    })
                    .appendTo(root) ;
                }
                sonst{
                    root.text("暂无任何可添加的项目！") ;
                }
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            item["index"] = i ;
            that._render(item) ;
        }) ;
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
    } ;
    tabProto._toggleConsolePanel = function(callback){
        this.getElem().find(".console-panel").slideToggle(function(){
            $.isFunction(callback) && callback() ;
        }) ;
    } ;
    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._render = function(data){
        var that = this ;
        var item = $("

")
        .text(data["text"])
        .on("click",function(){
            that._setCurrent(data["index"]) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(result) ;
            })
            .fail(function(){
                throw new Error("Net Error !") ;
            });
        })
        .appendTo(this.getElem().find(".title .items")) ;
        if("1" == data["showClose"]){
            $("X")
            .on("click",function(){
                if(win.confirm("是否删除此项？")){
                    that._deleteItem(data) ;
                    return false ; // 阻止冒泡
                }
            })
            .appendTo(item) ;
        }
    } ;
    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 ;
    } ;
    ui.createTab = function(elem,opts){
        var tab = new Tab(elem,opts) ;
        tab.init() ;
        Return-Tab ;
    } ;
})(jQuery) ;

(四），最后总结

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

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

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

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

以上就是本文的全部内容了,后续我们将继续完善此插件,喜欢本文的话,来给点个赞吧.