10 Tipps zur Entwicklung besserer JQuery -Plugins

Ausgezeichnete JQuery-Plug-Ins sind bei Zehntausenden von Webentwicklern auf der ganzen Welt beliebt, während diejenigen mit schlechten Designs schnell vergessen werden. Dieser Artikel bietet einige Tipps, mit denen Sie bessere JQuery -Plugins entwickeln und ihren Einfluss verbessern können.

Schlüsselpunkte:

• Stellen Sie sicher, dass Ihr JQuery-Plugin kettenübergreifbar ist, indem das JQuery-Objekt zurückgegeben wird, das es aufruft, sodass mehrere JQuery-Methoden verknüpft werden können.
• bietet Standardeinstellungen für Ihr JQuery -Plugin bereit, sodass Benutzer nach ihren eigenen Anforderungen anpassen können, und berücksichtigt die Unterstützung von HTML -Parametern zur einfachen Verwendung.
• Laden Sie Ihr JQuery -Plugin in Codebasen wie GitHub, Google Code und JQuery -Plugin -Verzeichnisse zur Promotion hoch und lassen Sie sich bereitstellen, um Unterstützung und erforderliche Aktualisierungen bereitzustellen.

1. Halten Sie die Integrität von Kettenaufrufen
auf

Sofern Ihr Plugin nicht einen Wert zurückgibt, muss die letzte Zeile der Plugin -Funktion:

sein

<code class="language-javascript">return this;</code>

Dies stellt sicher, dass Methodenaufrufe in Ketten getätigt werden können, zum Beispiel:

<code class="language-javascript">$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();</code>

2. vereinfachte Verwendung

In den meisten Fällen sollte Ihr Plugin ordnungsgemäß funktionieren, ohne dass der Entwickler die Dokumentation, Einstellungsoptionen oder das Bearbeiten des Plugin -Codes nachgibt. Wenn es sich um ein visuelles Widget handelt, sollten Entwickler keinen JavaScript -Code bearbeiten müssen. Sie können HTML einfach mit Klassen/ID angeben, die Ihren Code automatisch startet, z. B.

<code class="language-html"><p>My content</p></code>

Ihr Plug-In kann für sich selbst initialisiert werden, zum Beispiel:

<code class="language-javascript">$(function() {
    $("section.myjqWidget").myjqWidget();
});</code>

3. Verwenden Sie die entsprechende Benennung und Versionskontrollnummer

Das JQuery-Plug-In ist zahlreich. Ein Name wie "Tab" wird wahrscheinlich verwendet. Obwohl dies nicht immer ein Problem ist, sollte die Verwendung von vagen oder potenziell widersprüchlichen Namen vermieden werden. Versionsnummern sind auch wichtig, insbesondere wenn Entwickler Probleme melden.

4. Verwenden von Verschluss

verlassen Sie sich nicht auf $, um JQuery zu zitieren. Wenn der Entwickler andere Bibliotheken installiert hat, wurde er möglicherweise abgerufen, bevor JQuery geladen wurde. Der einfachste Weg, dieses Problem zu lösen, besteht darin, JQuery als $ Parameter einer anonymen Selbststart-Funktion zu bestehen, zum Beispiel: $

<code class="language-javascript">(function($) {
    // 此处的代码可以使用$来引用jQuery
})(jQuery);</code>

5. Stellen Sie die Standardparameter fest

Die meisten Plugins verwenden JavaScript -Objekt -Literal -Notation, um Parameter festzulegen, zum Beispiel:

<code class="language-javascript">$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});</code>

Dies hat mehrere Vorteile: Die Parameter sind leicht zu lesen, können in beliebiger Reihenfolge angeordnet werden oder insgesamt weggelassen werden. Sie sollten jedoch Standardwerte im Plugin -Code festlegen und sie entsprechend überschreiben, z. B.

<code class="language-javascript">$.fn.PlugIn = function(opts) {
    // 默认配置
    var config = $.extend({}, {
        opt1: 1,
        opt2: 2,
        opt3: 3,
        opt4: 4,
        opt5: 5
    }, opts);
    // ...
};</code>

Ihr Plugin kann Codes wie

für Referenzparameter verwenden. config.opt1

6. Unterstützen Sie die HTML -Parameter

Idealerweise sollten HTML -Widgets in der Lage sein, Parameter festzulegen, ohne dass Entwickler den JavaScript -Code ändern müssen. Sie können in Betracht ziehen, HTML5 -Datenattribute zu verwenden, zum Beispiel:

<code class="language-javascript">return this;</code>

auf diese kann über die data() -Methode von JQuery zugegriffen werden: .data("opt1").

7. Code -Dokumentation
schreiben

Fügen Sie einen kurzen Kommentar oben im Plugin hinzu, Beschreibung:

• Plugin -Namen und Version
• Plugin -Funktionen
• Verwendungsbeispiele
• Parameter
• Kontakt- und Support -Links

Wenn das Plugin besonders komplex ist, können Sie eine separate Readme -Datei in Betracht ziehen.

8. Versuchen Sie Ihr Plug-In gründlich

testen Sie es. Testen Sie es dann noch einmal. Test in allen Browsern. Es kann Probleme geben, die Sie nicht beheben können, wie z. B. IE6 -Kompatibilitätsprobleme. Es spielt keine Rolle, aber es wird nur in Ihrer Dokumentation erwähnt.

9. Verwenden Sie gute Vorlagen

Folgendes ist der Vorlagencode, den ich beim Erstellen eines neuen Plugins verwendet habe:

<code class="language-javascript">$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();</code>

Es bietet einen guten Ausgangspunkt:

• Plugin ist in einen Verschluss eingewickelt.
• Es wird Standardoptionen festgelegt, die durch Plugin -Parameter überschrieben werden.
• Jedes ausgewähltes Element wird als JQuery -Objekt an die Funktion DoSomething übergeben.
• enthält return this;.
• automatischer Startcode wird am Ende bereitgestellt.

10. Werben Sie Ihr Plug-In

Wenn Ihr Plugin von Entwicklern verwendet werden soll, laden Sie es in Codebasen wie GitHub, Google Code und JQuery -Plugin -Verzeichnisse hoch. Erstellen Sie eine Demo -Seite, bewerben Sie sie in Artikeln und veröffentlichen Sie weiterhin Informationen auf Twitter. Bereiten Sie sich dann auf die Unterstützung des Plugins vor und aktualisieren Sie es gegebenenfalls. Sie erhalten einige dumme Fragen und seltsame Feature -Anfragen, aber dies ist ein Teil eines erfolgreichen Plugin -Autors.

(Der nachfolgende Inhalt, nämlich der FAQ

Das obige ist der detaillierte Inhalt von10 Tipps zur Entwicklung besserer JQuery -Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!