Detailliertes Tutorial zum jQuery-Plug-in development_jquery

Das Erweitern von jQuery-Plug-Ins und -Methoden ist sehr leistungsfähig und kann viel Entwicklungszeit sparen. In diesem Artikel werden die Grundlagen, Best Practices und häufigen Fallstricke bei der Entwicklung von jQuery-Plugins beschrieben.

1. Erste Schritte

Das Schreiben eines jQuery-Plugins beginnt mit dem Hinzufügen eines neuen Funktionsattributs zu jQuery.fn. Der Name des hier hinzugefügten Objektattributs ist der Name Ihres Plug-ins:

Kopieren Sie den Code Der Code lautet wie folgt:

jQuery.fn.myPlugin = function(){

//Ihr eigener Plug-in-Code

};

Wo ist das $-Symbol, das Benutzern so gut gefällt? Es existiert noch, aber um Konflikte mit anderen JavaScript-Bibliotheken zu vermeiden, ist es besser, jQuery an ein selbstausführendes geschlossenes Programm zu übergeben, in dem jQuery dem $-Zeichen zugeordnet ist, um zu verhindern, dass das $-Zeichen von anderen Bibliotheken überschrieben wird .

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {
$.fn .my​​​Plugin = function () {
           //Ihr eigener Plug-in-Code
     };
})(jQuery);

In diesem geschlossenen Programm Wir können unbegrenzt das $-Symbol verwenden, um jQuery-Funktionen darzustellen.

2. Umgebung

Jetzt können wir mit dem Schreiben des eigentlichen Plug-in-Codes beginnen. Zuvor müssen wir jedoch eine Vorstellung von der Umgebung haben, in der sich das Plug-in befindet. Im Geltungsbereich des Plug-Ins stellt das Schlüsselwort „This“ das jQuery-Objekt dar, das das Plug-In ausführt. Hier kann es leicht zu Missverständnissen kommen, da das Schlüsselwort „This“ in anderen jQuery-Funktionen, die Rückrufe enthalten, das native DOM-Element darstellt . Dies führt häufig dazu, dass Entwickler das Schlüsselwort this fälschlicherweise unnötigerweise in jQuery einschließen, wie unten gezeigt.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {
$.fn .m yplugin = function () {

// Dies muss nicht in $ (this) eingeschlossen werden, da dies bereits ein jQuery-Objekt ist. this) entspricht $($('. #element'));

this.fadeIn('normal', function () {

Ein DOM-Element

});

};
})(jQuery);

$('#element').myPlugin();

3. Grundkenntnisse

Da wir nun die Grundlagen von jQuery-Plugins verstanden haben, schreiben wir ein Plugin, das ein paar Dinge tut.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {

$.fn.maxHeight = function () {

var max = 0;

this.each(function () {
max = Math.max(max, $ (this).height());
      });

                                                     ; //Die Höhe des div-Elements zurückgeben mit die größte Höhe


Dies ist ein einfaches Plug-in, das .height() verwendet, um die Höhe des div-Elements mit der größten Höhe auf der Seite zurückzugeben.


Kettenfähigkeit aufrechterhalten

Oft besteht die Absicht eines Plugins einfach darin, die gesammelten Elemente auf irgendeine Weise zu ändern und sie an die nächste Methode in der Kette zu übergeben. Das ist das Schöne am jQuery-Design und einer der Gründe, warum jQuery so beliebt ist. Um die Verkettbarkeit eines Plugins aufrechtzuerhalten, müssen Sie daher sicherstellen, dass Ihr Plugin das Schlüsselwort this zurückgibt.

Code kopieren

Der Code lautet wie folgt:

(function ($) {

$.fn.lockDimensions = function (type) {

return this.each(function () {

var $this = $(this);

if (!type || type == 'width') {
$this.width($this.width());
}

if (!type || type == 'height') {
$this.height($this.height());
}

});

};
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

Da das Plugin dieses Schlüsselwort zurückgibt, bleibt die Verkettbarkeit erhalten, sodass von jQuery erfasste Elemente weiterhin durch jQuery-Methoden wie .css gesteuert werden können. Wenn Ihr Plugin daher keinen intrinsischen Wert zurückgibt, sollten Sie das Schlüsselwort this immer innerhalb seines Gültigkeitsbereichs zurückgeben. Darüber hinaus können Sie daraus schließen, dass an ein Plugin übergebene Parameter innerhalb des Gültigkeitsbereichs des Plugins übergeben werden. Daher wird im vorherigen Beispiel die Zeichenfolge „width“ zu einem Typparameter des Plugins.

5. Standardwerte und Optionen

Für komplexere Plug-Ins, die viele anpassbare Optionen bieten, ist es am besten, eines zu haben, das beim Plug-In erweitert werden kann aufgerufen wird. Standardeinstellung (durch Verwendung von $.extend). Anstatt also ein Plugin mit einer Reihe von Parametern aufzurufen, können Sie es mit einem Objektparameter aufrufen, der die Einstellungen enthält, die Sie überschreiben möchten.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {

$.fn.tooltip = function (options) {

//Einige Standardwerte erstellen und alle bereitgestellten Optionen erweitern
var Settings = $.extend({
'location' : 'top ',
'background-color': 'blue'
}, Optionen);

return this.each(function () {

// Tooltip-Plug -in code

});

};
})(jQuery);

$('div').tooltip({
'location ': 'links'
});

In diesem Beispiel wird beim Aufrufen des Tooltip-Plug-Ins die Standortoption in den Standardeinstellungen überschrieben und die Option „Hintergrundfarbe“ bleibt auf ihrem Standardwert, sodass der endgültig aufgerufene Einstellungswert lautet:

Code kopieren Der Code lautet wie folgt:

{
'Standort': 'links',
'background-color': ' blue'
}

Dies ist eine sehr flexible Möglichkeit, ein hochgradig konfigurierbares Plugin bereitzustellen, ohne dass der Entwickler alle verfügbaren Optionen definieren muss.

6. Namensraum

Die richtige Benennung Ihres Plugins ist ein sehr wichtiger Teil der Plugin-Entwicklung. Mit dem richtigen Namespace können Sie garantieren, dass die Wahrscheinlichkeit, dass Ihr Plugin von anderen Plugins oder anderem Code auf derselben Seite überschrieben wird, sehr gering ist. Namespaces erleichtern Ihnen auch das Leben als Plugin-Entwickler, da sie Ihnen dabei helfen, den Überblick über Ihre Methoden, Ereignisse und Daten zu behalten.

7. Plug-in-Methode

Unter keinen Umständen sollte ein einzelnes Plugin mehrere Namespaces innerhalb des jQuery.fnjQuery.fn-Objekts haben.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {

$ .fn.tooltip = function (options) {
.fn.tooltiphide = function () {
// bad
};
$. {
// !!!
};

})(jQuery);

Davon wird abgeraten, da $.fn den $.fn-Namespace überfüllt. Um dieses Problem zu lösen, sollten Sie alle Methoden des Plugins im Objekttext sammeln und sie aufrufen, indem Sie den Stringnamen der Methode an das Plugin übergeben.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {

var method = {
init: function (options) {
},
show: function () // is
},
hide: Function () {
// Gut
},
Update: Funktion (Inhalt) {
// !!!
}

$ ) {

// Methodenaufruf (Argumente, 1)); this, arguments); 🎜>                                                                                                              >//Init-Methode aufrufen
$('div').tooltip();

//Init-Methode aufrufen
$('div'). tooltip({
foo: ' bar'
});

//Rufen Sie die Methode zum Ausblenden auf
$('div').tooltip('hide');

//Rufen Sie die Update-Methode auf
$('div').tooltip('update', 'Das ist der neue Tooltip-Inhalt!');


Diese Art von Plugin-Architektur ermöglicht es Ihnen, alle Methoden in einem übergeordneten Paket zu kapseln und sie aufzurufen, indem Sie den String-Namen der Methode und zusätzliche Parameter übergeben, die für diese Methode erforderlich sind. Diese Art der Kapselung und Architektur ist Standard in der jQuery-Plug-in-Community und wird von unzähligen Plug-ins verwendet, einschließlich Plug-ins und Widgets in der jQuery-Benutzeroberfläche.


8. Ereignisse


Eine wenig bekannte Funktion der Bind-Methode ermöglicht das Binden von Ereignis-Namespaces. Wenn Ihr Plugin ein Ereignis bindet, empfiehlt es sich, diesem Ereignis einen Namensraum zuzuweisen. Auf diese Weise stören Sie beim Aufheben der Bindung nicht andere Ereignisse desselben Typs, die möglicherweise bereits gebunden sind. Sie können dies tun, indem Sie den Namespace über „.“ an das Ereignis anhängen, das Sie binden möchten.




Code kopieren

Der Code lautet wie folgt:

(function ($) {

    var methoden = {
        init: function (options) {

            return this.each(function () {
$(window).bind('resize.tooltip', method.reposition);
            });

        },
        destroy: function () {

            return this. every(function () {
                $(window).unbind('.tooltip');
            })

        },
        reposition: function () {
            //. ..
        },
        show: function () {
            //...
        },
        hide: function () {
           . //...
        } ,
        update: function (content) {
            //...
        }
    };

    $.fn.tooltip = function (method) {

        if (methods[method]) {
            return models[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object ' ||. !method) {
            return models.init.apply(this, arguments);
        } else {
            $.error('Methode ' method ' existiert nicht in jQuery.tooltip');
        }
    };

})(jQuery);

$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');

在这个例子中, 当tooltip通过init方法初始化时, 它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip. 稍后, 当开发人员需要销毁tooltip的时候通过传递reposition的命名空间给插件. 这使我们能够安

九、数据

通常在插件开发的时候,你可能需要记录或者检查你的插件是否已经被初始化给了一个元素于记录大量的不同名字的分离的data, 空间读取这个对象不失为一个更好的方法.

复制代码 代码如下:

(function ($) {

    var methoden = {
        init: function (options) {

            return this.each(function () {

               var $this = $(this),
                   data = $this.data('tooltip'),
                                  Text: $ this.attr('title')
                    });

                // Wenn das Plugin noch nicht initialisiert wurde
                if (!data) {

                    /*
                    Hier können Sie weitere Einrichtungsaufgaben erledigen
                    */

                    Ziel: $this,
                        Tooltip: Tooltip
                    });

                }
            });
        },
        destroy: function () {

            return this.each(function () {

                var $this = $(this),
                    data = $this.data('tooltip');
data.tooltip.remove();
                $this.removeData('tooltip');

            })
     / / ...
        },
        show: function () {
            // ...
        },
        hide: function () {
            // ...
        },
        update: function (content) {
            // ...
        }
    };

    $.fn.tooltip = function (method) {

        if (methods[method]) {
            return models[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'Objekt' || !method) {
            return models.init.apply(this, arguments);
        }else {
                $.error('Methode ' method ' existiert nicht in jQuery.tooltip'); >

Das Kapseln von Daten in einem Objekt über einen Namespace erleichtert das Lesen aller Plugin-Eigenschaften von einem zentralen Ort aus.


10. Zusammenfassung und Best Practices

Durch das Schreiben von jQuery-Plug-ins können Sie Bibliotheken erstellen, die die nützlichsten Funktionen in wiederverwendbaren Code integrieren, wodurch Entwickler Zeit sparen und die Entwicklung effizienter gestalten. Beachten Sie bei der Entwicklung von jQuery-Plugins Folgendes:

1. Immer in einem geschlossenen Plug-in verpackt:

Code kopieren

Der Code lautet wie folgt: (function ($) {/* Plugin goes here */})(jQuery);2. Schließen Sie dieses Schlüsselwort nicht redundant in den Funktionsumfang des Plug-Ins ein

3. Es sei denn, das Plugin gibt einen bestimmten Wert zurück, andernfalls wird immer das Schlüsselwort this zurückgegeben, um die Verkettbarkeit aufrechtzuerhalten.

4. Übergeben Sie einen erweiterbaren Standardobjektparameter anstelle einer großen Anzahl von Parametern an das Plug-In.
5. Benennen Sie verschiedene Methoden nicht mehrfach in einem Plug-in.
3. Immer Namespace-Methoden, Ereignisse und Daten.