So verwenden Sie $ in jQuery, um Konflikte mit anderen Bibliotheken_jquery zu vermeiden

In JQuery ist $ ein Alias ​​von JQuery. Alle Stellen, an denen $ verwendet wird, können auch durch JQuery ersetzt werden. Beispielsweise ist $('#msg') äquivalent zu JQuery('#msg'). Wenn wir jedoch mehrere js-Bibliotheken einführen und das $-Symbol auch in einer anderen js-Bibliothek definiert ist, entsteht ein Konflikt, wenn wir das $-Symbol verwenden. Das Folgende ist ein Beispiel für die Einführung der beiden Bibliotheksdateien jquery.js und prototyp.js.
Der erste Fall: jquery.js wird nach Prototyp.js eingeführt, wie zum Beispiel:

adf3c3edb2b5b3fb3dba6da0f754db51 In diesem Fall schreiben wir Folgendes in unseren js-Code:

$('#msg').hide(); 

$ stellt immer das in jquery definierte $-Symbol dar, das auch als JQuery('#msg').hide() geschrieben werden kann. Wenn Sie das in Prototyp.js definierte $ verwenden möchten, werden wir es später vorstellen.

Der zweite Fall: jquery.js wird vor Prototyp.js eingeführt, wie zum Beispiel:

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

In diesem Fall schreiben wir Folgendes in unseren js-Code:

$('#msg').hide(); 

$ stellt das zu diesem Zeitpunkt in Prototype.js definierte $-Symbol dar. Wenn wir die Factory-Auswahlfunktion in jquery.js aufrufen möchten, können wir nur den vollständigen Namen JQuery('#msg').hide() verwenden.

Im Folgenden wird zunächst erläutert, wie das in verschiedenen JS-Bibliotheken definierte $-Symbol im ersten Fall der Einführung von JS-Bibliotheksdateien korrekt verwendet wird.

1. Verwenden Sie JQuery.noConflict()
Die Funktion dieser Methode besteht darin, dass Jquery den Besitz von $ aufgibt und die Kontrolle über $ anprototyp.js zurückgibt. Da jquery.js später eingeführt wurde, hat jquery schließlich die Kontrolle über $. Sein Rückgabewert ist JQuery. Nachdem wir diese Methode im Code aufgerufen haben, können wir $ nicht zum Aufrufen der jquery-Methode verwenden. Zu diesem Zeitpunkt stellt $ das in der Prototyp.js-Bibliothek definierte $ dar. Wie folgt:

JQuery.noConflict();//Sie können hier nicht mehr $('#msg').hide() schreiben. Das $ stellt zu diesem Zeitpunkt das in Prototyp.js definierte $-Symbol dar. JQuey('#msg').hide();

Von da an stellt $ das in „prototyp.js“ definierte „$“ dar. In „jquery.js“ kann nur noch der vollständige Name „$“ verwendet werden.
Nachdem Sie jQuery auf den konfliktfreien Modus eingestellt haben, können Sie einen Alias ​​für $ festlegen:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

Wenn Sie weiterhin $ von jQuery verwenden möchten, müssen Sie den Code in eine selbstausführende Funktion einbinden. Dies ist auch bei einigen Autoren von jQuery-Plug-ins üblich, da diese Autoren nicht wissen, ob dies bei anderen Bibliotheken der Fall ist im Projekt referenziert:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

2. JQuery-Alias ​​anpassen Wenn Sie Schwierigkeiten haben, nur den vollständigen Namen von JQuery zu verwenden, nachdem Sie die Methode JQuery.noConflict() in der ersten Methode verwendet haben, können wir auch den Alias ​​für JQuery neu definieren. Wie folgt:

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

Von jetzt an stellt $ das in „prototyp.js“ definierte $ dar. Sie können $j nur noch als Alias ​​für JQuery in „jquey.js“ verwenden.

3. Verwenden Sie Anweisungsblöcke und verwenden Sie weiterhin das in jquery.js definierte $ im Anweisungsblock wie folgt:

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

Oder verwenden Sie den folgenden Anweisungsblock:

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

Wenn wir im zweiten Fall die Dateireihenfolge der js-Bibliothek einführen und $ in jquery.js verwenden, können wir weiterhin die oben eingeführte Anweisungsblockmethode verwenden, z. B.:

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

Code

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

Diese Methode zur Verwendung von Anweisungsblöcken ist sehr nützlich, wenn wir selbst JQuery-Plug-Ins schreiben. Wir sollten diese Schreibmethode verwenden, da wir nicht wissen, wie wir während des spezifischen Arbeitsprozesses verschiedene JS-Bibliotheken nacheinander einführen Diese Art von Anweisung Die Blockschreibmethode kann Konflikte abschirmen.