Zerlegung des Implementierungsprinzips der Funktion noconflict in jQuery_jquery

Noconflict ist in jQuery eine wichtige Methode, um Variablenkonflikte zu verhindern und die Kontrolle über Variablen freizugeben. Wir wissen, dass jQuery der Außenwelt zwei globale Variablen bereitstellt, $ und jQuery. Obwohl jQuery nur zwei globale Variablen generiert, treten Konflikte nur in seltenen Fällen auf. Wenn die Webseite jedoch mehr Klassenbibliotheken enthält, kommt es automatisch zu einem Konflikt Tritt auf, wenn $ definiert wird oder eine globale jQuery-Variable vorhanden ist.

Die von jQuery bereitgestellte Funktion „noconflict“ löst das Variablenkonfliktproblem sehr gut. Unabhängig davon, ob es sich um einen $- oder einen jQuery-Konflikt handelt, analysieren wir als Nächstes die Konfliktbehandlung von jQuery.

Werfen wir zunächst einen Blick auf die Implementierung von noconflict im jQuery-Quellcode:

(function(window,undefined){
var 
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ){
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}
})
}(window)

Hier ist jQuery.extend die Methode von jQuery zum Erweitern statischer Eigenschaften. Dies kann als direktes Anhängen der noConflict-Methode an jQuery angesehen werden. Definieren Sie innerhalb der anonymen Funktion die internen Variablen _jQuery und _$, um window.jQuery bzw. window.$ zu speichern. Der Zweck besteht darin, interne Variablen zu verwenden, um den Status dieser beiden globalen Variablen zu speichern, bevor jQuery ausgeführt wird Diese beiden Variablen werden später im Antikollisionsvorgang wiederhergestellt. noConflict kann den Konflikt zwischen den beiden Variablen $ und jQuery verarbeiten. Wenn ein wahrer Parameter übergeben wird, wird der jQuery-Konflikt behandelt.
window.$ === jQuery wird verwendet, um zu bestimmen, ob die globale Variable gleich jQuery ist. Wenn sie gleich ist, wird die globale Variable $ in der Variablen wiederhergestellt, bevor jQuery ausgeführt wurde (gespeichert in der internen Variablen _$); window.jQuery === jQuery Wenn die Behandlung tiefer Konflikte aktiviert ist und die globale Variable jQuery gleich der internen jQuery ist, wird die globale jQuery in ihren vorherigen Zustand zurückversetzt. Die Bedeutung der Beurteilung von window.$ === jQuery und window.jQuery=jQuery besteht darin, die definierten Variablen vor dem Überschreiben zu schützen, wie zum Beispiel den folgenden Code:

//引入jQuery库
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jQuery这句判断，那么$将会等于undefined而不是"String"。
console.log(jQuery); //同上，如果没有判断window.jQuery===jQuery，重新定义的jQuery就会被undefined覆盖。

Der gesamte Vorgang ist in der folgenden Abbildung dargestellt:

noConflict gibt den jQuery-Konstruktor innerhalb der jQuery-Bibliothek zurück, verwenden Sie ihn wie $!