So entwickeln Sie ein JQuery -Plugin

JQuery Plug-in-Entwicklungshandbuch: Erstellen wiederverwendbarer Komponenten

Kernpunkte:

• Erstellen Sie JQuery Plug-In können Entwicklern Komponenten erstellen, die auf jeder Webseite wiederverwendet werden können, wodurch das Risiko von Funktionsnamenkonflikten verringert werden kann. Das Plug-In verwendet die Funktionsdefinition von JQuery. fn this Bei der Entwicklung von JQuery-Plug-Ins ist die Parameterverarbeitung sehr wichtig. Um eine komplexe Parameterverarbeitung zu vermeiden, übergeben Sie ein einzelnes JSON -Objekt anstelle mehrerer Parameter. Sie können die
-Funktion von JQuery verwenden, um Standardparameter und Benutzerparameter zusammenzuführen.
• extend Stellen Sie sicher, dass die Methode
zurückgibt, damit andere Funktionen gekettete Anrufe tätigen, ein Schlüsselmerkmal von JQuery namens "Kettenaufrufe". Das Plugin sollte mit der Erweiterung
• gespeichert und in der HTML -Seite enthalten sein, nachdem die Jquery -Bibliothek geladen wurde. this .js

jQuery ist die beliebteste JavaScript -Bibliothek, mit der viele Websites dynamische Effekte und AJAX -Funktionen erzielen. Relativ wenige Entwickler tauchen jedoch mit Plugin -Entwicklung ein. In diesem Tutorial wird ein einfaches Plugin erstellt, um seine Grundlagen zu erklären. In unserem Code wird Text von einem oder mehreren ausgewählten Knoten umgebaut - Anzeigen der Demo -Seite.

Warum JQuery -Plugin erstellen?

Kurz gesagt: Wiederverwendung. Durch Erweiterung von JQuery können Sie Komponenten erstellen, die auf jeder Webseite wiederverwendet werden können. Ihr Code ist eingekapselt und es ist unwahrscheinlich, dass Sie denselben Funktionsnamen an anderer Stelle verwenden.

Wie funktioniert jQuery

Im Kernteil erhält JQuery ein DOM -Element oder eine Zeichenfolge, die einen CSS -Selektor enthält. Es gibt ein JQuery-Objekt zurück, bei dem es sich um eine Array-ähnliche Sammlung von Dom-Knoten handelt. Dann kann ein oder mehrere Methoden in einer Kette zu dieser Gruppe von Knoten als

bezeichnet werden, zum Beispiel:

Hinweis: Obwohl die JQuery -Bibliothek "JQuery" genannt wird, ist "$" eine Verknüpfungsvariable, die sie verweist. Beachten Sie, dass andere Bibliotheken "$" besetzen können.

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

Wie funktioniert Jquery Plugin

jQuery ermöglicht das Hinzufügen von Methoden zu seinen Bibliotheken. Wenn diese Methoden aufgerufen werden, wird das JQuery -Objekt als -OvaScript übergeben. Der DOM -Knoten kann nach Bedarf betrieben werden, und die Methode sollte

zurückgeben, damit andere Funktionen als Ketten bezeichnet werden können. Unser Beispiel -Plugin wird mit dem folgenden Code aufgerufen:

this this Wir werden auch zwei optionale Parameter hinzufügen:

und

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

. Wenn diese beiden Parameter definiert sind, muss die Stringlänge zwischen diesen beiden Grenzen liegen, um umgekehrt zu werden.

minlength maxlength Plugin -Anweisung

Plugin verwendet die Funktionsdefinition von Jquery , zum Beispiel:

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

Verwenden von "jQuery" anstelle von "$" stellt sicher, dass es nicht mit anderen JavaScript -Bibliotheken in Konflikt steht. Alle unsere internen Code sollten sich auch auf "JQuery" anstelle von "$" beziehen. Wir können jedoch anonyme Funktionen verwenden, um Eingaben zu speichern und die Dateigröße zu reduzieren:

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

Diese Funktion läuft sofort und gibt JQuery als Parameter mit dem Namen "$". Da "$" eine lokale Variable ist, können wir davon ausgehen, dass sie immer auf die Jquery -Bibliothek verweist und nicht die erste andere Bibliothek, um die globale "$" -Variable zu erhalten.

Plugin -Parameter

Unser Plugin benötigt zwei Parameter: minlength und maxlength. Am einfachsten ist es, sie als Funktionsparameter zu definieren, zum Beispiel:

jQuery.fn.reverseText = function(params) { ... };

Aber was ist, wenn wir uns später entscheiden, später weitere Parameter hinzuzufügen? Unser Plugin kann Dutzende von Optionen haben - die Parameterverarbeitung kann schnell kompliziert werden. Alternative können wir ein einzelnes JSON -Objekt übergeben, zum Beispiel:

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

Die erste Zeile der Funktion sollte eine Reihe von Standardparametern definieren und dann die Parameter

mit jedem benutzerdefinierten Wert reverseText überschreiben. Die -Funktion von JQuery kann uns helfen, mit diesem Problem umzugehen: extend

, sofern der Anrufcode diese Werte nicht überschreibt, beträgt

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

0 und

99999. params.minlength params.maxlength

Plugin -Code

Jetzt können wir unseren Haupt -Plugin -Code schreiben:

Erläuterung:

(function($) {
    $.fn.reverseText = function(params) { ... }
})(jQuery);

// 示例
$("p").reverseText( { minlength: 0, maxlength: 100 } );

Funktionen durchqueren alle JQuery -Dom -Knoten und rufen Sie eine anonyme Funktion auf.
1. this.each In der Funktion enthält "dies" einen einzelnen Knoten. Eine JQuery -Knotensammlung ist
zugeordnet, damit wir die JQuery -Methode ausführen können.
2. $t Variable
wird als Textzeichenfolge im DOM -Knoten zugewiesen.
3. auf eine leere Zeichenfolge einstellen. origText newText Wenn die Länge von
zwischen
4. und origText liegt, erstellt die Schleife eine invertierte Textzeichenfolge in params.minlength. Aktualisieren Sie dann den DOM -Knoten entsprechend. params.maxlength newText

Brechen Sie den Kettenanruf nicht!

Schließlich sollten wir uns daran erinnern, das JQuery -Objekt zurückzugeben, damit andere Methoden als Ketten bezeichnet werden können:

// 合并默认参数和用户参数
params = $.extend( {minlength: 0, maxlength: 99999}, params);

Voller Code

Unser Plugin -Code ist jetzt abgeschlossen:

Speichern Sie diese Datei als

// 遍历所有节点
this.each(function() {

    // 将单个节点表示为 jQuery 对象
    var $t = $(this);

    // 查找文本
    var origText = $t.text(), newText = '';

    // 文本长度是否在定义的限制内？
    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {
        for (var i = origText.length; i--; ) newText += origText.substr(i, 1);
        $t.text(newText);
    }

});

. Wir können dann die JQuery -Bibliothek in eine beliebige HTML -Seite nach dem Laden einbeziehen, zum Beispiel:

jquery.reversetext.js

Die Liste auf dieser Seite kehrt nun den Text im ersten und dritten Kugeln um (denken Sie daran, das erste Element beginnt mit 0):

return this;

Ressourcen:

• Plugin -Demo -Seite anzeigen
• Plugin JavaScript -Code ansehen
• Plugins herunterladen und Beispielcode

Sie sollten jetzt ein gutes Verständnis für die JQuery-Plug-in-Entwicklung haben. Das SitePoint JavaScript -Forum ist auch eine großartige Ressource, um Hilfe und Rat zu suchen. In Kürze kommen: Ein neues dreiteiliges Tutorial zum Erstellen nützlicher Seitenkomponenten in JQuery-Plugins.

(Der FAQ-Teil im Originaldokument wird hier weggelassen, da der Inhalt dieses Teils nicht mit den Pseudo-Original-Anforderungen übereinstimmt und zu lang ist.)

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie ein JQuery -Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!