Exemple d'explication du développement du 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 jQuery plug-ins, vous devez d'abord connaître deux questions : Qu'est-ce qu'un jQuery plug-in ? jQueryComment utiliser le plug-in ?
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 a du jQuery. élément. Cet objet est Vous pouvez utiliser les méthodes d'action jQuery définies dans 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.

Plug-in jQuery de base
Avec 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é, le this à l'intérieur du plug-in est l'objet jQuery appelant actuellement le plug-in. Dans ce cas, chaque balise sélectionnée à l'aide de la méthode $(). utilisera changeStyle() lors de l'appel de la méthode du plug-in css() pour réinitialiser le style color.

Plug-in jQuery qui répond aux appels en chaîne
Les appels en chaîne sont une fonctionnalité majeure de jQuery Un plug-in général doit suivre le style jQuery et répondre aux exigences des appels 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.

Plug-in jQuery pour éviter la pollution du symbole $
Il existe de nombreuses bibliothèques js qui utilisent le symbole $, bien que jQuery puisse utiliser la méthode jQuery.noConflict() pour céder les droits d'utilisation. du symbole $, s'il est défini Lorsque les plug-ins sont définis à l'aide d'objets $.fn, l'utilisation de ces plug-ins sera affectée par d'autres bibliothèques $ qui utilisent des variables js. 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));

Parce qu'une fonction d'exécution immédiate est utilisée, le $ n'appartient à ce moment qu'au périmètre de fonction de cette fonction d'exécution immédiate, évitant ainsi la pollution du $ symbole.

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 la taille du texte du contenu de l'élément d'étiquette, alors je peux faites-le 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 de nombreux paramètres qui doivent être transmis au plug-in, nous le faisons. peut définir un objet paramètre, puis placer les paramètres qui doivent être transmis au plug-in 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));

使用方式：$("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方法。

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!