suchen

Heim >Web-Frontend >js-Tutorial >Tutorial zur Entwicklung von JavaScript-Plug-Ins (5)_Javascript-Kenntnisse

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

WBOY
WBOYOriginal
2016-05-16 16:16:361239Durchsuche

1, Eröffnungsanalyse

Hallo zusammen! In den ersten beiden Artikeln haben wir hauptsächlich darüber gesprochen, wie man Plug-Ins mit jQuery entwickelt und wie man prozedurales Design und objektorientiertes Design kombiniert. Beide Methoden haben ihre eigenen Vor- und Nachteile. Hey, Unsinn. Sagen Sie weniger und kommen Sie auf den Punkt. Laden Sie die tatsächlichen Renderings direkt hoch:

Wie Sie sehen, handelt es sich um ein Dropdown-Menü-Plug-in. In unserer täglichen Entwicklung kann es vorkommen, dass wir das Gefühl haben, dass das System nicht sehr schön ist und nur über eingeschränkte Funktionen verfügt, was dazu führt, dass Benutzer

Das Erlebnisformular und die Benutzerinteraktivität sind nicht sehr gut, daher werde ich heute ein „Hey Hey“ simulieren. Lassen Sie es uns unten im Detail analysieren.

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

$(function(){
var itemSelector = new ItemSelector($("#item-selector"),{
           currentText: „Bitte Artikel auswählen“ ,
Artikel: [
                 {
                   Text: „JavaScript“ ,
                   Wert: "js" ,
Deaktiviert: „1“
                                                                                      {
                  text: "Css" ,
                   Wert: "css" ,
Deaktiviert: „0“
                                                                                      {
                  Text: "Html" ,
                   Wert: "html" ,
Deaktiviert: „0“
            }
] ,
           Modus: „0“, // Wenn es „1“ ist, wird der Kontrollkästchen-Mehrfachauswahlmodus unterstützt
​​​​​ Änderung: Funktion(Wert){
                            // Geben Sie hier Ihren Code ein
         }
}) ;
itemSelector.init() ;
setTimeout(function(){
console.log(itemSelector.getCurrentValue()); // Testen, um das aktuell ausgewählte Element zu erhalten
},2000) ;

„var itemSelector = new ItemSelector()“ enthält zwei Parameter. Der erste ist das Dom-Knotenobjekt und der zweite ist die Plug-in-Parameteroption „currentText“, die den Text im ausgewählten Textanzeigebereich darstellt. ItemSelector"-Plugin. beschreiben.

„items“ ist ein Array, das die Eigenschaften des „ItemSelector“-Elements enthält, einschließlich Textbeschreibungen und Optionswerten, „disabled“ steht für die Sichtbarkeit der Listenelemente, 0 steht für Anzeige und 1 steht für nicht anzeigbar.

„Ändern“ stellt bei Auswahl die Operationsrückruffunktion dar und die Optionsdaten werden in Form von Parametern zurückgegeben.

(2), welche Funktionen sind beteiligt

Die anzeigbaren Renderings sind wie folgt:

Die nicht anzeigbaren Renderings lauten wie folgt:

　Der Unterschied zwischen den beiden besteht darin, dass die nicht darstellbaren Statusdaten nicht zurückgegeben werden und das Floaten keine Auswirkungen hat.

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

　（1），html

Code kopieren Der Code lautet wie folgt:



                          Big Bear {{bb}} – DXJ-Benutzeroberfläche ------ ItemSelector


           

                                                           

U                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    





(2), CSS




Code kopieren

Der Code lautet wie folgt:


 /* Artikelauswahl */
 #item-selector {
     Rand: 0 automatisch;
     Breite: 220px ;
     Überlauf:versteckt;
     border:2px solid #ccc;
 }
 #item-selector .title {
     border-bottom:1px solid #ccc;
     Überlauf:versteckt;
 }
 #item-selector .title div {
     Breite:190px;
     border:0px ;
     Farbe:#999;
     Schriftfamilie: arial ;
     Schriftgröße: 14px;
     Höhe:28px;
     Zeilenhöhe:28px;
     float:left;
     Cursor:Zeiger;
 }
 #item-selector .title span {
     display:block;
     Höhe:30px;
     Zeilenhöhe:30px;
     Breite:29px;
     float:left;
     text-align:center;
     border-left:1px solid #ccc;
     Cursor:Zeiger;
 }
 #item-selector .content {
     Breite: 220px ;
     Überlauf:versteckt;
 }
 #item-selector .content .items {
     Überlauf:versteckt;
 }
 #item-selector .content .items div {
     padding-left:20px;
     Breite: 200px ;
     Höhe:32px;
     Zeilenhöhe:32px;
     Schriftfamilie: „微软雅黑“ ;
     Schriftgröße: 14px;
     Schriftstärke:bold;
     Cursor:Zeiger;
 }
 .item-hover {
     Hintergrund:#3385ff;
     Farbe:#fff;
 }

　（3），"ItemSelector.js"

复制代码 代码如下:

Funktion ItemSelector(elem,opts){
    this.elem = elem ;
    this.opts = opts ;
} ;
var ISProto = ItemSelector.prototype ;
ISProto.getElem = function(){
    gib this.elem zurück ;
} ;
ISProto.getOpts = function(){
    return this.opts ;
} ;
/* Datenmanipulation*/
ISProto._setCurrent = function(current){
    this.getOpts()["current"] = current ;
} ;
ISProto.getCurrentValue = function(current){
    return this.getOpts()["current"] ;
} ;
/* Datenmanipulation*/
ISProto.init = function(){
    var that = this ;
    this.getOpts()["current"] = null ; // 数据游标
    this._setItemValue(this.getOpts()["currentText"]) ;
    var itemsElem = that.getElem().find(".content .items") ;
    this.getElem().find(".title div").on("click",function(){
        itemsElem.toggle() ;
    }) ;
    this.getElem().find(".title span").on("click",function(){
        itemsElem.toggle() ;
    }) ;
    $.each(this.getOpts()["items"],function(i,item){
        item["id"] = (new Date().getTime()).toString() ;
        that._render(item) ;
    }) ;
} ;
ISProto._setItemValue = Funktion(Wert){
    this.getElem().find(".title div").text(value)
} ;
ISProto._render = function(item){
    var that = this ;
    var itemElem = $("
")
    .text(item["text"])
    .attr("id",item["id"]) ;
    if("0" == item["disabled"]){
        itemElem.on("click",function(){
            var onChange = that.getOpts()["change"] ;
            that.getElem().find(".content .items").hide() ;
            that._setItemValue(item["text"]) ;
            that._setCurrent(item) ;
            onChange && onChange(item) ;
        })
        .mouseover(function(){
            $(this).addClass("item-hover") ;
        })
        .mouseout(function(){
            $(this).removeClass("item-hover") ;
        }) ;
    }
    sonst{
        itemElem.css("color","#ccc").on("click",function(){
            that.getElem().find(".content .items").hide() ;
            that._setItemValue(item["text"]) ;
        }) ;
    }
    itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;

(四），最后总结

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

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

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

 　  (4)是默认下拉模式.

本文先到这里了，后续我们再继续讨论，希望小伙伴们能够喜欢本系列文章.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Methode, um zu bestimmen, ob eine Anmeldung erfolgen soll oder nicht, und um die Sprungfähigkeiten von page_javascript zu bestimmenNächster Artikel：js-Methode, um zu bestimmen, ob eine Anmeldung erfolgen soll oder nicht, und um die Sprungfähigkeiten von page_javascript zu bestimmen

In Verbindung stehende Artikel

Mehr sehen