Eine kurze Entwicklungsanleitung für jQuery-Bibliotheks-Plugins für JavaScript_jquery

jQuery-Plug-ins werden normalerweise in zwei Kategorien unterteilt.

1. Selektorbasiertes Plug-in (unterstützt Kettenoperationen)
2. Plug-in basiert nicht auf Selektor (unterstützt keinen Kettenbetrieb)

Ich habe vor einiger Zeit kurz die jQuery-Plug-in-Entwicklung kennengelernt und zwei einfache Plug-ins entwickelt. Hier ist eine kurze Zusammenfassung der Entwicklungsmodelle der beiden Plug-ins.
Selektorbasiertes Plugin

Das übliche Entwicklungsmodell ist wie folgt:

(function($, window, undefined) {
 $.fn.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 return this.each(function() { // 让插件支持链式操作
  // 在这里编写插件功能代码
 });
 };
})(jQuery, window);

Erstellen Sie zunächst eine anonyme selbstausführende Funktion mit formalen Parametern $ , window und undefinierten und tatsächlichen Parametern jQuery und window.

Häh? Warum wird für undefiniert kein entsprechender Aktualparameter übergeben? Dies ist ein kleiner Trick, wenn man bedenkt, dass dem Variablennamen undefiniert möglicherweise an anderer Stelle ein Wert im JavaScript-Code zugewiesen wurde und seine wahre Bedeutung verloren hat. Daher übergeben wir diesen Parameter hier einfach nicht, um sicherzustellen, dass er sich in der anonymen selbstausführenden Funktion befindet . Wirklich undefiniert.

Nachdem jQuery übergeben wurde, entspricht es $. Dadurch wird sichergestellt, dass das im Plug-in aufgerufene $ jQuery und keine Bibliothek wie Prototype sein muss.

Die aufrufende Methode dieses Plug-In-Typs hat im Allgemeinen die Form $(selector).PluginName();.

Solche konkreten Beispiele finden Sie unter https://github.com/libuchao/KTwitter
Nicht-Selektor-basierte Plugins

Da diese Art von Plug-in nicht auf Selektoren angewiesen ist, gibt es keine Kettenoperation. Das allgemeine Entwicklungsmodell lautet wie folgt:

(function($, window, undefined) {
 $.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 // 在这里编写插件功能代码
 };
})(jQuery, window);

Die Aufrufform dieses Plug-In-Typs ist im Allgemeinen $(selector).PluginName();.