So verstehen Sie das JQuery-Plug-In

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? Wie verwende ich das jQuery-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 Operationsmethode enthält. Hier wird die $-Methode verwendet, um das a-Element auszuwählen und ein DOM-Objekt des a-Elements zurückzugeben Wird in der jQuery definierten jQuery Betriebsmethode verwendet. Wie erhält das DOM-Objekt diese Methoden? Tatsächlich definiert jQuery intern ein jQuery-Objekt. Wenn Sie sich den jQuery.fn-Quellcode ansehen, können Sie jQuery finden, was bedeutet, dass das jQuery.fn=jQuery.prototype-Objekt das Prototypobjekt von jQuery.fn ist, und das jQuery Betriebsmethoden von jQuery sind alle im DOM-Objekt definiert, dann kann das jQuery.fn-Objekt diese Methoden über den Prototyp erben. jQuery

1. Grundlegendes jQuery-Plugin

Nachdem wir die oben genannten Kenntnisse kennen, können wir ein einfaches

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: jQuery

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

und dann das Plug-in wie folgt verwenden:

Wenn das

$("p").changeStyle("red");

-Plug-in aufgerufen wird, ist dies innerhalb des Plug-ins das

-Objekt, das das Plug-in aktuell aufruft. In diesem Fall wird jedes mit der jQuery-Methode ausgewählte Tag wiederholt Verwenden der Methode $() beim Aufruf des Plug-Ins changeStyle() Set css(). color

2. jQuery-Plug-in, das Chain-Calling erfüllt

Chain-Calling ist eine Hauptfunktion von

Stil. Erfüllen Sie die Anforderungen für Kettenrufe. Die Art und Weise, Kettenaufrufe zu implementieren, ist ebenfalls sehr einfach: jQueryjQuery

Wenn Sie es dann verwenden, können Sie andere Methoden mit Kettenaufrufen aufrufen:

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

Der entscheidende Punkt bei der Implementierung von Kettenaufrufen ist einfach Einzeiliger Code

$("p").changeStyle("red").addClass("red-color");

: Wenn diese Codezeile zum Plug-In hinzugefügt wird, wird nach der Ausführung des Plug-Ins das aktuelle

-Objekt zurückgegeben, und danach können andere return this-Methoden aufgerufen werden Plug-in-Methode. jQueryjQuery

3. jQuery-Plug-in zur Vermeidung von $-Symbolverschmutzung

Es gibt viele js-Bibliotheken, die das

-Symbol verwenden, obwohl

übergeben werden kann Verwenden der $-Methode Das Recht zur Verwendung des jQuery-Symbols. Wenn das Plug-In jedoch mithilfe des jQuery.noConflict()-Objekts definiert ist, wird die Verwendung dieser Plug-Ins von anderen $-Bibliotheken beeinflusst, die es verwenden $.fn Variablen. In diesem Fall können wir die Funktion „Sofortige Ausführung“ verwenden, um das Plug-In durch Übergabe von Parametern zu kapseln. Die Form ist wie folgt: $js

Da eine Funktion zur sofortigen Ausführung verwendet wird, gehört das $ zu diesem Zeitpunkt nur zum Funktionsumfang dieser Funktion zur sofortigen Ausführung, wodurch eine Verschmutzung des Symbols

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

vermieden wird.

$

4. jQuery-Plug-in, das Parameter akzeptieren kann

Weiter mit dem obigen Beispiel, wenn ich diesem Plug-in auch eine Funktion hinzufügen möchte, um die zu setzen Textgröße des Etikettenelementinhalts, dann kann ich es wie folgt implementieren:

Die obige Plug-in-Parameterübergabemethode eignet sich für Situationen, in denen relativ wenige Parameter vorhanden sind müssen an das Plug-In übergeben werden. Wir können ein Parameterobjekt definieren und dann die Parameter, die an das Plug-In übergeben werden müssen, im Parameterobjekt platzieren. Das Plug-in ist wie folgt definiert:

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

Verwendung:

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

}(jQuery));

Ein weiterer Vorteil, wenn wir die Parameter in ein Objekt einfügen und an das Plug-in übergeben, besteht darin, dass wir dies können Definieren Sie einige Parameter innerhalb des Plug-Ins. Einige Standardwerte, zum Beispiel: $("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));//这里将Jquery作为实参传递给匿名函数

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

Das obige ist der detaillierte Inhalt vonSo verstehen Sie das JQuery-Plug-In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!