Comment comprendre le plug-in Jquery

Dans le travail de développement réel, vous rencontrerez toujours des besoins professionnels en matière d'effets d'affichage tels que le défilement, la pagination, le calendrier, etc. Pour ceux qui ont été exposés à jQuery et sont familiers avec l'utilisation de jQuery, le premier Ce qui me vient à l'esprit est de trouver les plug-ins actuels. Il existe jQuery pour répondre aux besoins d'affichage correspondants. Il existe une variété de jQuery plug-ins parmi lesquels choisir pour certains composants couramment utilisés dans les pages actuelles. Il existe également de nombreux sites Web sur Internet qui collectent spécifiquement des jQuery plug-ins. L'utilisation des plug-ins jQuery peut en effet apporter de la commodité à notre travail de développement, mais si vous ne l'utilisez que simplement et ne comprenez pas les principes, vous rencontrerez des problèmes lors de l'utilisation ou personnaliserez le développement du plug-in. Le but de cet article est de comprendre rapidement les principes de développement des jQuery plug-ins et de maîtriser les compétences de base du jQuery développement.

---

Avant de développer des plug-ins jQuery, vous devez d'abord connaître deux questions : Qu'est-ce qu'un plug-in jQuery ? Comment utiliser le plug-in jQuery ?
La première question est que le plug-in jQuery est une méthode utilisée pour étendre l'objet prototype jQuery En termes simples, le plug-in jQuery est une méthode de l'objet jQuery. En fait, après avoir répondu à la première question, vous connaîtrez également la réponse à la deuxième question. La façon d'utiliser le plug-in jQuery est d'appeler la méthode objet jQuery.

Regardons d'abord un exemple : $("a").css("color","red"). Nous savons que chaque objet jQuery contiendra la méthode d'opération jQuery définie dans DOM Ici, la méthode $ est utilisée pour sélectionner l'élément a et renvoyer un objet jQuery de cet élément a. utilisé dans la méthode de fonctionnement jQuery définie DOM. Alors, comment l'objet jQuery obtient-il ces méthodes ? En fait, jQuery définit un objet jQuery.fn en interne. En regardant le code source de jQuery, vous pouvez trouver jQuery.fn=jQuery.prototype, ce qui signifie que l'objet jQuery.fn est l'objet prototype de jQuery, et le jQuery. 🎜> les méthodes de fonctionnement de DOM sont toutes définies sur l'objet jQuery.fn, puis l'objet jQuery peut hériter de ces méthodes via le prototype.

1. Plug-in jQuery de base

Après avoir connu les connaissances ci-dessus, nous pouvons écrire un simple jQuery plug-in. Si j'ai maintenant besoin d'un plug-in jQuery pour changer la couleur du contenu de l'étiquette, je peux implémenter le plug-in comme suit :

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

puis utiliser le plug-in comme suit :

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

Lorsque le plug-in

est appelé, cet objet jQuery appelant actuellement le plug-in se trouve à l'intérieur du plug-in. Dans ce cas, chaque balise sélectionnée à l'aide de la méthode $() sera répétée. en utilisant la méthode changeStyle() lors de l'appel du plug-in css() Définir le style color.

2. Plug-in jQuery qui satisfait aux appels en chaîne

Les appels en chaîne sont une fonctionnalité majeure de jQuery Un plug-in général devrait suivre le jQuery. style. Répondre aux exigences d’appel en chaîne. La façon d'implémenter les appels en chaîne est également très simple :

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

Ensuite, lorsque vous l'utilisez, vous pouvez appeler en chaîne d'autres méthodes :

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

Le point clé pour implémenter les appels en chaîne est simplement une ligne de Code return this, si cette ligne de code est ajoutée au plug-in, une fois le plug-in exécuté, l'objet jQuery actuel sera renvoyé, puis d'autres méthodes jQuery pourront être appelées après le méthode de plug-in.

3. Plug-in jQuery pour éviter la pollution du symbole $

Il existe de nombreuses bibliothèques js qui utilisent le symbole $, bien que jQuery puisse être transmis en utilisant la méthode jQuery.noConflict() Le droit d'utiliser le symbole $, mais si le plug-in est défini à l'aide de l'objet $.fn, alors l'utilisation de ces plug-ins sera affectée par d'autres bibliothèques $ qui utilisent js variables. Dans ce cas, nous pouvons utiliser la fonction d'exécution immédiate pour encapsuler le plug-in en passant des paramètres. La forme est la suivante :

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

Comme une fonction d'exécution immédiate est utilisée, le $ n'appartient à ce moment qu'à la portée de la fonction de cette fonction d'exécution immédiate, évitant ainsi la pollution du symbole $.

4. Plug-in jQuery pouvant accepter des paramètres

En continuant avec l'exemple ci-dessus, si je souhaite également ajouter une fonction à ce plug-in pour définir le taille du texte du contenu de l'élément d'étiquette, alors je peux l'implémenter comme ceci :

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

La méthode de transmission des paramètres du plug-in ci-dessus convient aux situations où il y a relativement peu de paramètres s'il y a plus de paramètres. doivent être transmis au plug-in, nous pouvons définir un objet paramètre, puis les paramètres qui doivent être transmis au plug-in sont placés dans l'objet paramètre. Le plug-in est défini comme suit :

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

}(jQuery));

Utilisation :
$("p").changeStyle({colorStr:"red",fontSize:14});
Un autre avantage de mettre les paramètres dans un objet et de les passer au plug-in est que l'on peut définir certains paramètres à l'intérieur du plug-in Quelques valeurs par défaut, par exemple :

(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方法。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!