développement back-end
tutoriel php
Que sont les plug-ins jQuery ? Partager comment écrire le plug-in jQuery
Que sont les plug-ins jQuery ? Partager comment écrire le plug-in jQuery
Jul 21, 2018 pm 02:00 PM
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($){ //開始時(shí)將$作為匿名函數(shù)的形參
/*這里放置代碼，可以使用$作為jQuery的縮寫別名*/
})(jQuery); //這里就將jQuery作為實(shí)參傳遞給匿名函數(shù)了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])
用一個(gè)或多個(gè)其它對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，然后返回被擴(kuò)展的對(duì)象。
例如合并settings對(duì)象和options對(duì)象，修改并返回settings對(duì)象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);Le résultat est?:
newOptins={valitdate:true,limit:5,name:”bar”};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);
};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();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)設(shè)置匹配元素的顏色。
(2)獲取匹配的元素（元素集合中的第1個(gè)）的顏色。
首先將該插件按規(guī)范命名為jquery.color.js。
然后再JavaScript文件里搭好框架.由于是對(duì)jQuery對(duì)象的方法擴(kuò)展，因此采用第1類方法jQuery.fn.extend()來(lái)編寫。
;(function($){
$.fn.extend({
“color”:function(value){
//這里寫插件代碼
}
});
})(jQuery);這里給這個(gè)方法提供一個(gè)參數(shù)value，如果調(diào)用了方法的時(shí)候傳遞了value這個(gè)參數(shù)，那么就是用這個(gè)值來(lái)設(shè)置字體顏色；否則就是匹配元素的字體顏色的值。
首先，實(shí)現(xiàn)第1個(gè)功能，設(shè)置字體顏色。注意，由于插件內(nèi)部的this指向的是jQuery對(duì)象，而非普通的DOM對(duì)象。代碼如下：
;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery); 接下來(lái)實(shí)現(xiàn)第2個(gè)功能。如果沒(méi)用給方法傳遞參數(shù)，那么就是獲取集合對(duì)象中第1個(gè)對(duì)象的color的值。由于css()方法本身就具有返回第1個(gè)匹配元素樣式值的功能，因此此處無(wú)需通過(guò)eq()來(lái)獲取第1個(gè)元素。只要這兩個(gè)方法結(jié)合起來(lái),判斷一下value的值是否是undefined即可。
jQuery代碼如下：
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);這樣一來(lái)，插件也就完成了。現(xiàn)在來(lái)測(cè)試一下代碼。
<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);
//插件應(yīng)用
$(function(){
//查看第一個(gè)div的color樣式值
alert($(“div”).color()+”\n返回字符串，證明此插件可用?！?;
//把所有的div字體顏色都設(shè)為紅色
alert($(“div”).color(“red”)+”\n返回object證明得到的是jQuery對(duì)象。“)；
}）
</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);表格隔行變色插件
表格隔行變色的代碼如下：
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
//判斷是否選中
var hasSelected=$(this).hasClass('selected');
//如果選中，則移出selected類，否則就加上selected類
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找內(nèi)部的checkbox,設(shè)置對(duì)應(yīng)的屬性
.find('checkbox').attr('checked'.!hasSelected);
});
//如果復(fù)選框默認(rèn)情況下是選擇的，則高色
$('tbody>tr:has(:checked)').addClass('selected');首先把插件方法取名為alterBgColor，然后為該插件方法搭好框架，jQuery代碼如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//插件代碼
}
});
})(jQuery);框架完成后，接下來(lái)就需要為options定義默認(rèn)值。默認(rèn)構(gòu)建這樣({odd:"odd",even:"even",selected:"selected"})一個(gè)Object。這樣就可以通過(guò)$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自定義奇偶行的樣式類名以及選中后的樣式類名。同時(shí)，直接使用$("#sometable").alterBgColor()就可以應(yīng)用 默認(rèn)的樣式類名。
jQuery代碼如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({
odd:"odd", /*偶數(shù)行樣式*/
even:"even", /*奇數(shù)行樣式*/
selected:"selected" /*選中行樣式*/
},options);
}
});
})(jQuery);如果在后面的程序中需要使用options對(duì)象的屬性，可以使用如下的方式來(lái)獲得：
options.odd; //獲取options對(duì)象中odd屬性的值 options.even; //獲取options對(duì)象中even屬性的值 options.selected; //獲取options對(duì)象中selected屬性的值
接下來(lái)就需要把這些值放到程序中，來(lái)代替先前程序中的固定值。
最后就是匹配元素的問(wèn)題了。顯然不能直接用$('tbody>tr')選擇表格行，這樣會(huì)使頁(yè)面中全部的
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//設(shè)置默認(rèn)值
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)
//查找內(nèi)部的checkbox,設(shè)置對(duì)應(yīng)屬性
.find(':checkbox').attr('checked',!hasSelected);
});
//如果單選框默認(rèn)情況下是選擇的，則高色
$('tbody>tr:has(:checkd),this').addClass(options,selected);
rerturn this; //返回this，使方法可鏈
}
});
})(jQuery);在代碼的最后，返回this，讓這個(gè)插件具有可鏈性。
此時(shí)，插件就完成了?，F(xiàn)在來(lái)測(cè)試這個(gè)插件。構(gòu)造兩個(gè)表格，id分別為table1和table2，然后使用其中一個(gè)
