Que sont les plug-ins jQuery ? Partager comment écrire le plug-in jQuery-tutoriel php-php.cn

Qu'est-ce que le plug-in jQuery ? Les plug-ins jQuery courants sont principalement divisés en trois types : les plug-ins qui encapsulent les méthodes d'objet ; les plug-ins qui encapsulent les fonctions globales et les plug-ins de sélection ; Alors, quelle est l'écriture et l'utilisation de chaque plug-in jQuery basé sur ces trois plug-ins jQuery ? Parlons ensuite de l’utilisation et de l’écriture de plug-ins jQuery.

Classification des plug-ins jQuery :

1. Plug-ins qui encapsulent des méthodes d'objet

Ce type de plug-in encapsule des objets. méthodes et est utilisé pour C'est le plug-in le plus courant pour opérer sur les objets jQuery obtenus via des sélecteurs.

2. Plug-in qui encapsule les fonctions globales

Vous pouvez ajouter des fonctions indépendantes à l'espace de noms jQuery. Par exemple, la méthode jQuery.noConflict(), la méthode jQuery.ajax() couramment utilisée et la méthode jQuery.trim() qui supprime le premier espace, etc., sont toutes des plugins attachés au noyau en tant que fonctions globales dans jQuery. .

3． Plug-in sélecteur

Dans certains cas, vous devrez utiliser un plug-in sélecteur.

Points de base du plug-in

1 Il est recommandé que le nom de fichier du plug-in jQuery soit nommé jquery.[nom du plug-in] .js pour éviter toute confusion avec d'autres plug-ins de bibliothèque JavaScript.

2. Toutes les méthodes objet doivent être attachées à l'objet jQuery.fn et toutes les fonctions globales doivent être attachées à l'objet jQuery lui-même.

3. À l'intérieur du plug-in, ceci pointe vers l'objet jQuery actuellement obtenu via le sélecteur, contrairement aux méthodes générales, telles que la méthode click(), où l'interne this pointe vers l'élément DOM.

4. Vous pouvez parcourir tous les éléments à travers this.each.

5. Toutes les méthodes ou plug-ins de fonctions doivent se terminer par un point-virgule, sinon des problèmes peuvent survenir lors de la compression. Pour plus de sécurité, vous pouvez même ajouter un point-virgule à l'en-tête du plug-in pour empêcher le code irrégulier d'autres personnes d'affecter le plug-in.

6. Le plug-in doit renvoyer un objet jQuery pour garantir que le plug-in peut être chaîné. Sauf si le plug-in doit renvoyer une quantité qui doit être obtenue, comme une chaîne ou un tableau, etc.

7. Évitez d'utiliser $ comme alias pour les objets jQuery à l'intérieur du plug-in, mais utilisez jQuery complet pour le représenter. Cela peut éviter les conflits. Bien entendu, vous pouvez également utiliser des techniques de fermeture pour éviter ce problème, afin que le plug-in puisse continuer à utiliser $ comme alias pour jQuery. De nombreux plugins font cela.

Fermetures dans les plug-ins

Concernant les fermetures, ECMAScript en a une description simple : permettre l'utilisation de fonctions internes (c'est-à-dire des définitions de fonctions et des expressions de fonctions situées dans un autre dans le corps d'une fonction), de plus, ces fonctions internes ont accès à toutes les variables locales, paramètres et autres fonctions internes déclarées dans la fonction externe dans laquelle elles sont contenues, lorsqu'une de ces fonctions internes est appelée en dehors de la fonction externe les contenant, une fermeture sera formée. Autrement dit, la fonction interne sera exécutée après le retour de la fonction externe. Lorsque cette fonction interne est exécutée, elle doit encore accéder aux variables locales, paramètres et autres fonctions internes de sa fonction externe. Les valeurs de ces variables locales, paramètres et déclarations de fonction (initialement) sont les valeurs au retour de la fonction externe, mais seront également affectées par la fonction interne.

Définissez d'abord une fonction anonyme function(){/*Placez le code ici*/}, puis entourez-la de crochets pour devenir (function(){/*Placez le code ici*/}). est exécuté via l'opérateur (). Les paramètres peuvent être transmis pour être utilisés par les fonctions internes.

//Notez que pour une meilleure compatibilité, il y a un point-virgule avant le début :

;(function($){ //开始时将$作为匿名函数的形参
 
/*这里放置代码，可以使用$作为jQuery的缩写别名*/
 
})(jQuery); //这里就将jQuery作为实参传递给匿名函数了

Copier après la connexion

Ce qui précède est la structure d'un plug-in jQuery commun.

Le mécanisme du plug-in jQuery

jQuery fournit deux méthodes pour étendre les fonctions jQuery, à savoir la méthode jQuery.fn.extend() et la méthode jQuery.extend() . Le premier est utilisé pour le premier des trois types de plug-ins mentionnés précédemment, et le second est utilisé pour étendre les deux derniers plug-ins. Les deux méthodes acceptent un paramètre, de type Object. Les "paires nom/valeur" de l'objet Object représentent respectivement "le corps de la fonction ou du nom de la méthode/de la fonction".

En plus de pouvoir étendre les objets jQuery, la méthode jQuery.extend() possède également une fonction puissante, qui consiste à utiliser et à étendre les objets Object existants.

Le code jQuery est le suivant :

jQuery.extend(target,obj1,…….[objN])
 
   用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。
   例如合并settings对象和options对象，修改并返回settings对象。
 
 
var settings={validate:false,limit:5,name:”foo”};
 
var options={validate:true,name:”bar”};
 
var newOptions=jQuery.extend(settings,options);

Copier après la connexion

Le résultat est :

newOptins={valitdate:true,limit:5,name:”bar”};

Copier après la connexion

La méthode jQuery.extend() est souvent utilisée pour définir une série de paramètres par défaut pour les méthodes de plug-in. Comme indiqué dans le code suivant :

function foo(options){
 
options=jQuery.extend({
 
name:”bar”,
 
limit:5,
 
datatype:”xml”
 
},options);
 
};

Copier après la connexion

Si la valeur correspondante est définie dans l'objet options de paramètre transmis lors de l'appel de la méthode foo(), alors la valeur définie sera utilisé, sinon la valeur par défaut sera utilisée. Le code est le suivant :

foo({name:”a”,length:”4”,dataType:”json”});
 
foo({name:”a”,length:”4”});
 
foo({name:”a”});
 
foo();

Copier après la connexion

En utilisant la méthode jQuery.extend(), vous pouvez facilement remplacer la valeur par défaut par les paramètres transmis. À ce stade, l’appel à la méthode reste le même, sauf qu’une carte est transmise à la place d’une liste de paramètres. Ce mécanisme est non seulement plus flexible mais aussi plus concis que la méthode traditionnelle de détection de chaque paramètre. De plus, l'utilisation de paramètres nommés signifie que l'ajout de nouvelles options n'affectera pas le code écrit dans le passé, ce qui le rendra plus intuitif et plus clair à utiliser pour les développeurs.

Écrire un plug-in jQuery

1. Plug-in qui encapsule les méthodes d'objet jQuery

Écrire un plug-in qui définit et obtient le color

Présentez d'abord comment écrire un plug-in color(). Ce plug-in est utilisé pour implémenter les deux fonctions suivantes.

(1)设置匹配元素的颜色。

(2)获取匹配的元素（元素集合中的第1个）的颜色。

首先将该插件按规范命名为jquery.color.js。

然后再JavaScript文件里搭好框架.由于是对jQuery对象的方法扩展，因此采用第1类方法jQuery.fn.extend()来编写。

 ;(function($){
 
$.fn.extend({
 
“color”:function(value){
 
//这里写插件代码
 
}
 
});
 
})(jQuery);

Copier après la connexion

这里给这个方法提供一个参数value，如果调用了方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色；否则就是匹配元素的字体颜色的值。

首先，实现第1个功能，设置字体颜色。注意，由于插件内部的this指向的是jQuery对象，而非普通的DOM对象。代码如下：

;(function($){
 
$.fn.extend({
 
“color”:function(value){
 
return this.css(“color”,value);
 
}
 
});
 
})(jQuery);

Copier après la connexion

接下来实现第2个功能。如果没用给方法传递参数，那么就是获取集合对象中第1个对象的color的值。由于css()方法本身就具有返回第1个匹配元素样式值的功能，因此此处无需通过eq()来获取第1个元素。只要这两个方法结合起来,判断一下value的值是否是undefined即可。

jQuery代码如下：

;(function($){
 
$.fn.extend({
 
“color”:function(value){
 
if(color===undefined){
 
return this.css(“color”,value);
 
}else{
 
Return this.css(“color”,value);
 
}
 
}
 
});
 
})(jQuery);

Copier après la connexion

这样一来，插件也就完成了。现在来测试一下代码。

<script type=”text/javascript”>
 
//插件编写
 
;(function($){
 
$.fn.extend({
 
“color”:function(value){
 
if(color===undefined){
 
return this.css(“color”,value);
 
}else{
 
Return this.css(“color”,value);
 
}
 
}
 
});
 
})(jQuery);
 
 
 
//插件应用
 
$(function(){
 
//查看第一个div的color样式值
 
alert($(“div”).color()+”\n返回字符串，证明此插件可用。”);
 
//把所有的div字体颜色都设为红色
 
alert($(“div”).color(“red”)+”\n返回object证明得到的是jQuery对象。“)；
 
}）
 
</script>
 
<div style=”color:red”>red</div>
 
<div style=”color:blue”>blue</div>
 
<div style=”color:green”>green</div>
 
<div style=”color:yellow”>yellow</div>
    另外，如果要定义一组插件，可以使用如下所示的写法：
 
:(function($){
 
$.fn.extend({
 
"color":function(value){
 
//插件代码
 
},
 
"border":function(value){
 
//插件代码
 
},
 
"background":function(value){
 
//插件代码
 
}
 
};
 
})(jQuery);

Copier après la connexion

表格隔行变色插件

表格隔行变色的代码如下：

$("tbody>tr:odd").addClass("odd");
 
$("tbody>tr:even").addClass("even");
 
$(&#39;tbody>tr&#39;).click(function(){
 
//判断是否选中
 
var hasSelected=$(this).hasClass(&#39;selected&#39;);
 
//如果选中，则移出selected类，否则就加上selected类
 
$(this)[hasSelected?"removeClass":"addClass"](&#39;selected&#39;)
 
//查找内部的checkbox,设置对应的属性
 
.find(&#39;checkbox&#39;).attr(&#39;checked&#39;.!hasSelected);
 
});
 
 
 
//如果复选框默认情况下是选择的，则高色
 
$(&#39;tbody>tr:has(:checked)&#39;).addClass(&#39;selected&#39;);

Copier après la connexion

首先把插件方法取名为alterBgColor，然后为该插件方法搭好框架，jQuery代码如下：

;(function($){
 
$.fn.extend({
 
"alterBgColor":function(options){
 
//插件代码
 
}
 
});
 
})(jQuery);

Copier après la connexion

框架完成后，接下来就需要为options定义默认值。默认构建这样({odd:"odd",even:"even",selected:"selected"})一个Object。这样就可以通过$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自定义奇偶行的样式类名以及选中后的样式类名。同时，直接使用$("#sometable").alterBgColor()就可以应用默认的样式类名。

jQuery代码如下：

;(function($){
 
$.fn.extend({
 
"alterBgColor":function(options){
 
options=$.extend({
 
odd:"odd", /*偶数行样式*/
 
even:"even", /*奇数行样式*/
 
selected:"selected" /*选中行样式*/
 
},options);
 
}
 
});
 
})(jQuery);

Copier après la connexion

如果在后面的程序中需要使用options对象的属性，可以使用如下的方式来获得：

options.odd; //获取options对象中odd属性的值
 
options.even; //获取options对象中even属性的值
 
options.selected; //获取options对象中selected属性的值

Copier après la connexion

接下来就需要把这些值放到程序中，来代替先前程序中的固定值。

最后就是匹配元素的问题了。显然不能直接用$('tbody>tr')选择表格行，这样会使页面中全部的元素都隔行变色。应该使用选择器选中某个表格，执行alterBgColor()方法后，将对应的表格内元素进行隔行变色。因此，需要把所有通过$('tbody>tr')选择的对象改写成$('tbody>tr',this)，表示在匹配的元素内（当前表格内）查找，并应用上一步中的默认值。jQuery代码如下：

;(function($){
 
$.fn.extend({
 
"alterBgColor":function(options){
 
//设置默认值
 
options=$.extend({
 
odd."odd",
 
even."even",
 
selected:"selected"
 
},options);
 
$("tbody>tr:odd",this).addClass(options,odd);
 
$("tbody>tr:even",this).addClass(options,even);
 
$("tbody>tr",this).click(function(){
 
//判断是否选中
 
var hasSelected=$(this).hasClass(options,selected);
 
//如果选中，则移出selected类，否则加上selected类
 
$(this)[hasSelected?"removeClass":"addClass"](options,selected)
 
//查找内部的checkbox,设置对应属性
 
.find(&#39;:checkbox&#39;).attr(&#39;checked&#39;,!hasSelected);
 
});
 
//如果单选框默认情况下是选择的，则高色
 
$(&#39;tbody>tr:has(:checkd),this&#39;).addClass(options,selected);
 
rerturn this; //返回this，使方法可链
 
}
 
});
 
})(jQuery);

Copier après la connexion

在代码的最后，返回this，让这个插件具有可链性。
此时，插件就完成了。现在来测试这个插件。构造两个表格，id分别为table1和table2，然后使用其中一个

调用alterBgColor()方法，以便查看是否能独立工作，并且具有可链性。
jQuery代码如下：

$(&#39;#table2&#39;)
.alterBgColor() //应用插件
 
.find("th").css("color","red"); //可链式操作

Copier après la connexion

需要注意的是，jQuery的选择符可能会匹配1个或者多个元素。因此，在编写插件时必须考虑到这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个DOM元素。如下jQuery代码所示：

 ;(function($)){
 
$.fn.extend({
 
"SomePlugin":function(options){
 
return this.each(function(){
 
//这里置放代码
 
});
 
}
 
});
 
})(jQuery);

Copier après la connexion