Das Beispiel in diesem Artikel beschreibt die Verwendung globaler Funktionen in der jQuery-Plug-in-Produktion. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
1. Neue globale Funktion hinzufügen
Die sogenannten globalen Funktionen sind eigentlich Methoden von jQuery-Objekten, aber aus praktischer Sicht handelt es sich um Funktionen, die sich innerhalb des jQuery-Namespace befinden
(1) Um eine Funktion hinzuzufügen, geben Sie einfach die neue Funktion als Eigenschaft des jQuery-Objekts an.
jQuery.five =function(){
alert("直接继承方式不一样");
}
Anruf:
(2)Mehrere Funktionen hinzufügen
jQuery.five =function(){
alert("直接继承方式不一样");
}
jQuery.six =function(){
alert("直接继承方式不一样2");
}Anruf:
Bei der oben genannten Methode besteht das Risiko eines Namespace-Konflikts. Um dieses Problem zu vermeiden, kapseln Sie am besten alle globalen Funktionen, die zu diesem Plug-in gehören, wie folgt in ein Objekt:
//命名空间继承
jQuery.myPlugin ={
one : function(obj){
var object = obj;
var id = object.attr("id");
alert(id);
},
two : function(){
alert(22);
}
}Dadurch wird tatsächlich ein weiterer Namespace für die globale Funktion erstellt: jQuery.myPlugin.
2. jQuery-Objektmethode hinzufügen
Der Großteil der integrierten Funktionalität in jQuery wird über seine Objektmethoden bereitgestellt.
jQuery.fn.myMethod= function(){
alert(11);
}
Aufruf:
Hinweis: jQuery.fn ist ein Alias von jQuery.prototype.
Beispiel: Die folgende Methode verhält sich falsch
<ul> <li>11111111111111111111111111</li> <liclass="this">22222222222222222222</li> <li>333333333333333</li> <liclass="that">44444444444444444</li> <liclass="this">55555555555555</li> <li>6666666666666666</li> <li>777777777777777777</li> <liclass="that">777777777777777777</li> </ul> <inputtype="button" value="swap" id="swap" />
jQuery.fn.swapClass= function(class1,class2){
if(this.hasClass(class1)){
this.removeClass(class1).addClass(class2);
}
if(this.hasClass(class2)){
this.removeClass(class2).addClass(class1);
}
}
$("#swap").click(function(){
$("li").swapClass("this","that");
return false;
})
Alle verwenden diesen Stil.
(1)Hermit-Iteration
Um das korrekte Verhalten unabhängig von der Übereinstimmung mehrerer Elemente sicherzustellen, besteht die einfachste Möglichkeit darin, die Methode .each() immer in der Umgebung der Methode aufzurufen, sodass
Führt eine Hermit-Iteration durch, und die Durchführung einer Hermit-Iteration ist entscheidend für die Aufrechterhaltung der Konsistenz zwischen Plugins und integrierten Methoden. Innerhalb der aufgerufenen .each()-Methode ist dies
bezieht sich nacheinander auf jedes DOM-Element. Der obige Code wird wie folgt geändert:
jQuery.fn.swapClass= function(class1,class2){
this.each(function(){
var $element = jQuery(this);
if($element.hasClass(class1)){
$element.removeClass(class1).addClass(class2);
}else if($element.hasClass(class2)){
$element.removeClass(class2).addClass(class1);
}
})
}
Anruf:
(2) Methodenverkettung
Um die Methodenverkettung zu verwenden, muss in allen Plugin-Methoden ein jQuery-Objekt zurückgegeben werden. Das zurückgegebene jQuery-Objekt ist normalerweise das Objekt, auf das hiervon verwiesen wird.
jQuery.fn.swapClass= function(class1,class2){
return this.each(function(){
var $element = jQuery(this);
if($element.hasClass(class1)){
$element.removeClass(class1).addClass(class2);
}else if($element.hasClass(class2)){
$element.removeClass(class2).addClass(class1);
}
})
}
Anruf:
3. Neue Abkürzungsmethode hinzufügen
//添加新的简写方法
jQuery.fn.slideFadeOut= function(speed,callback){
return this.animate({
height : "hide",
opacity : "hide"
},speed,callback)
}
jQuery.fn.slideFadeIn= function(speed,callback){
return this.animate({
height : "show",
opacity : "show"
},speed,callback)
}
jQuery.fn.slideFadeToggle= function(speed,callback){
return this.animate({
height : "toggle",
opacity : "toggle"
},speed,callback)
}
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
