Beispiel für die Verwendung globaler Funktionen, erstellt von jQuery plug-in_jquery

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:

Code kopieren Der Code lautet wie folgt:

$.fünf();

(2)Mehrere Funktionen hinzufügen

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

Anruf:

Code kopieren Der Code lautet wie folgt:

$.fünf();$.six( );

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:

Code kopieren Der Code lautet wie folgt:

$.fn.myMethod();

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:

Code kopieren Der Code lautet wie folgt:

$("li").swapClass("this","that ")

(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:

Code kopieren Der Code lautet wie folgt:

$("li").swapClass("this","that "). css("text-decoration","underline");

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.