Beispielerklärung zur jQuery-Plug-in-Entwicklung

Bei der tatsächlichen Entwicklungsarbeit werden Sie immer auf geschäftliche Anforderungen für Anzeigeeffekte wie Scrollen, Blättern, Kalender usw. stoßen. Für diejenigen, die jQuery kennengelernt haben und mit der Verwendung von jQuery vertraut sind, das erste Was mir in den Sinn kommt, ist, das aktuelle zu finden. Es gibt jQuery Plug-Ins, um die entsprechenden Anzeigeanforderungen zu erfüllen. Für einige Komponenten, die häufig auf aktuellen Seiten verwendet werden, stehen verschiedene jQuery-Plugins zur Auswahl. Es gibt auch viele Websites im Internet, die speziell jQuery-Plug-ins sammeln. Die Verwendung von jQuery Plug-Ins kann unsere Entwicklungsarbeit zwar erleichtern, aber wenn Sie es nur einfach verwenden und die Prinzipien nicht verstehen, treten bei der Verwendung oder Anpassung der Plug-In-Entwicklung viele Zweifel auf. Der Zweck dieses Artikels besteht darin, die Entwicklungsprinzipien von jQuery Plug-Ins schnell zu verstehen und die grundlegenden Fähigkeiten der jQuery Entwicklung zu beherrschen.

Bevor Sie jQuery Plug-Ins entwickeln, müssen Sie zunächst zwei Fragen kennen: Was ist ein jQuery Plug-In? jQueryWie verwende ich das Plug-in?
Die erste Frage ist: Das jQuery-Plug-in ist eine Methode zur Erweiterung des jQuery-Prototypobjekts. Einfach ausgedrückt ist das jQuery-Plug-in eine Methode des jQuery-Objekts. Tatsächlich kennen Sie nach der Beantwortung der ersten Frage auch die Antwort auf die zweite Frage. Die Verwendung des jQuery-Plugins besteht darin, die Objektmethode jQuery aufzurufen.

Schauen wir uns zunächst ein Beispiel an: $("a").css("color","red"). Wir wissen, dass jedes jQuery-Objekt die in jQuery definierte DOM-Operationsmethode enthält. Hier wird die $-Methode verwendet, um das a-Element auszuwählen und ein a-Objekt des jQuery zurückzugeben Dieses Objekt ist: Sie können die in jQuery definierten Aktionsmethoden DOM verwenden. Wie erhält das jQuery-Objekt diese Methoden? Tatsächlich definiert jQuery intern ein jQuery.fn-Objekt. Wenn Sie sich den jQuery-Quellcode ansehen, können Sie jQuery.fn=jQuery.prototype finden, was bedeutet, dass das jQuery.fn-Objekt das Prototypobjekt von jQuery ist, und das jQuery Betriebsmethoden von DOM sind alle im jQuery.fn-Objekt definiert, dann kann das jQuery-Objekt diese Methoden über den Prototyp erben.

Grundlegendes jQuery-Plug-in
Mit den oben genannten Kenntnissen können wir ein einfaches jQuery Plug-in schreiben. Wenn ich nun ein jQuery-Plugin benötige, um die Farbe von Etiketteninhalten zu ändern, kann ich das Plug-in wie folgt implementieren:

$.fn.changeStyle = function(colorStr){         this.css("color",colorStr);
}

und dann das Plug-in wie folgt verwenden:
$("p").changeStyle("red");Wenn das
-Plug-in aufgerufen wird, ist das this im Plug-in das jQuery-Objekt, das das Plug-in aktuell aufruft. In diesem Fall jedes Tag, das mit der $()-Methode ausgewählt wurde verwendet changeStyle() beim Aufrufen der css()-Plugin-Methode, um den color-Stil zurückzusetzen.

jQuery-Plug-in, das Chain-Calling erfüllt
Chain-Calling ist ein Hauptmerkmal von jQuery. Ein allgemeines Plug-in sollte dem jQuery-Stil folgen und die Anforderungen von Chain-Calling erfüllen. Die Art und Weise, Kettenaufrufe zu implementieren, ist ebenfalls sehr einfach:

$.fn.changeStyle = function(colorStr){         this.css("color",colorStr);         return this;
}

Wenn Sie es dann verwenden, können Sie andere Methoden mit Kettenaufrufen aufrufen:
$("p").changeStyle("red").addClass("red-color");
Der entscheidende Punkt bei der Implementierung von Kettenaufrufen ist einfach Einzeiliger Code return this: Wenn diese Codezeile dem Plug-In hinzugefügt wird, wird nach der Ausführung des Plug-Ins das aktuelle jQuery-Objekt zurückgegeben, und danach können andere jQuery-Methoden aufgerufen werden Plug-in-Methode.

jQuery-Plug-in zur Vermeidung von $-Symbolverschmutzung
Es gibt viele js-Bibliotheken, die das $-Symbol verwenden. jQuery kann jedoch die jQuery.noConflict()-Methode verwenden, um die Nutzungsrechte zu übergeben des $-Symbols, falls definiert. Wenn Plug-Ins mithilfe von $.fn-Objekten definiert werden, wird die Verwendung dieser Plug-Ins durch andere $-Bibliotheken beeinflusst, die js-Variablen verwenden. In diesem Fall können wir die Funktion „Sofortige Ausführung“ verwenden, um das Plug-In durch Übergabe von Parametern zu kapseln. Das Formular lautet wie folgt:

(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));

Da eine Funktion zur sofortigen Ausführung verwendet wird, gehört $ zu diesem Zeitpunkt nur zum Funktionsumfang dieser Funktion zur sofortigen Ausführung, wodurch eine Verschmutzung von $ vermieden wird Symbol.

jQuery-Plug-in, das Parameter akzeptieren kann
Um mit dem obigen Beispiel fortzufahren: Wenn ich diesem Plug-in auch eine Funktion hinzufügen möchte, um die Textgröße des Inhalts des Etikettenelements festzulegen, dann kann ich das tun Machen Sie es so:

(function($){
     $.fn.changeStyle = function(colorStr，fontSize){
         this.css("color",colorStr).css("fontSize",fontSize+"px");        
         return this;
     }
}(jQuery));

Die obige Methode zur Übergabe von Plug-In-Parametern eignet sich für Situationen, in denen relativ wenige Parameter vorhanden sind, die an das Plug-In übergeben werden müssen Sie können ein Parameterobjekt definieren und dann die Parameter, die an das Plug-In übergeben werden müssen, in das Parameterobjekt einfügen. Das Plug-in ist wie folgt definiert:

(function($){
     $.fn.changeStyle = function(option){
         this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");        
         return this;
     }

}(jQuery));

使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});
把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值，例如：

(function($){

     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

上面的代码用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。
这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

总结
定义插件的方式除了上面说的用$.fn来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。类似下面的写法：

(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));

PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

Das obige ist der detaillierte Inhalt vonBeispielerklärung zur jQuery-Plug-in-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!