Beispielanalyse der Verwendung von noConflict() in jQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung von noConflict() in jQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

jQuery verwendet standardmäßig den „$“-Operator. Das $-Symbol ist nur eine Referenz auf das window.jQuery-Objekt, jQuery.noConflict(). Diese Funktion überträgt die Kontrolle über die Variable $ an die erste Bibliothek, die es implementiert. Dadurch wird sichergestellt, dass jQuery nicht mit den $objects anderer Bibliotheken in Konflikt gerät. Nach dem Ausführen dieser Funktion können Sie nur noch über jQuery-Variablen auf jQuery-Objekte zugreifen. Wenn beispielsweise $("div p") verwendet wird, muss es durch jQuery("div p") ersetzt werden.

1. „$“-Operator

1. jQuery verwendet standardmäßig den Operator „$“, und andere Frameworks wie Prototypen verwenden ebenfalls „$“. Wenn jQuery nach anderen Bibliotheken eingeführt wird, erhält jQuery daher das Recht, „$“ zu verwenden. Diese Situation ist leicht zu verstehen, schließlich wird JS von oben nach unten ausgeführt.

2. Wenn jQuery vor anderen Bibliotheken eingeführt wird, die „$“ verwenden, belegt jQuery nicht „$“.

Tipp: Diese Methode ist nützlich, wenn andere JavaScript-Bibliotheken $ für ihre Funktionen verwenden.

Wir alle verwenden $, wenn wir Variablen in jquery abrufen, aber es gibt viele Plug-Ins, die das $-Symbol verwenden können. Wenn wir gleichzeitig darauf verweisen möchten, führt dies zu Problemen passiert. noconflict()

2. Definition von jQuery.noConflict

Die jQuery.noConflict-Methode enthält einen optionalen booleschen Parameter, der bestimmt, ob die $-Referenz zusammen mit dem jQuery-Objekt selbst übergeben werden soll:

jQuery.noConflict([removeAll])

Funktionsbeschreibung:

Standardmäßig wird durch die Ausführung von noConflict die Kontrolle über die Variable $ an die erste Bibliothek übertragen, die $ generiert. Wenn „removeAll“ auf „true“ gesetzt ist, wird durch die Ausführung von noConflict die gesamte Kontrolle über $ und das jQuery-Objekt selbst an die erste Bibliothek übertragen, die sie generiert .

3. jQuery.noConflict-Quellcode-Analyse

Am Anfang des jQuery-Quellcodes müssen Sie zunächst Folgendes tun:

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,

Es ist leicht zu verstehen, dass jQuery die beiden Objekte jQuery und $ in der Fensterumgebung über zwei private Variablen zuordnet, um zu verhindern, dass die Variablen gewaltsam überschrieben werden. Sobald die noConflict-Methode aufgerufen wird, wird der Unterschied zwischen _jQuery, _$, jQuery, $ verwendet, um die Übertragungsmethode der Steuerung zu bestimmen. Der spezifische Code lautet wie folgt:

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

Wenn Sie sich das oben erwähnte Problem mit der Parametereinstellung ansehen, deckt _$ window.$ ab. Zu diesem Zeitpunkt wird der jQuery-Alias ​​​​$ ungültig, jQuery selbst ist jedoch intakt. Wenn eine andere Bibliothek oder ein anderer Code die $-Variable neu definiert, wird die Kontrolle darüber vollständig übertragen. Wenn andererseits „deep“ auf „true“ gesetzt ist, überschreibt _jQuery window.jQuery und sowohl $ als auch jQuery sind ungültig.
Der Vorteil dieser Operation besteht darin, dass unabhängig davon, ob es sich um eine Mischung von Frameworks oder um eine stark widersprüchliche Ausführungsumgebung wie die Koexistenz mehrerer Versionen von jQuery handelt, dies aufgrund des von der noConflict-Methode bereitgestellten Übergabemechanismus und der Rückgabe nicht abgedeckter jQuery-Objekte möglich ist vollständig durch Variablenzuordnung gelöst werden.

4. jQuery.noConflict-Instanz

1. Ordnen Sie das von $ referenzierte Objekt wieder dem ursprünglichen Objekt zu:

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $() 

2. Stellen Sie die Verwendung des Alias ​​$ wieder her, erstellen Sie dann eine Funktion, führen Sie sie aus und verwenden Sie $ weiterhin als Alias ​​für jQuery im Rahmen dieser Funktion. In dieser Funktion ist das ursprüngliche $-Objekt ungültig. Diese Funktion funktioniert gut für die meisten Plugins, die nicht auf andere Bibliotheken angewiesen sind:

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3. Sie können jQuery.noConflict() mit der Abkürzung ready kombinieren, um den Code kompakter zu machen:

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4. Erstellen Sie einen neuen Alias, um das jQuery-Objekt in der nächsten Bibliothek zu verwenden:

var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5. Verschieben Sie jQuery vollständig in einen neuen Namespace:

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.