Maison >interface Web >js tutoriel >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.
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
.
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.
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 $
.
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!