Teilen Sie die Verwendung von noConflict() in jQuery

Dieser Artikel stellt hauptsächlich die Verwendung von noConflict() in jQuery vor. Er analysiert die Funktion, Definition und die damit verbundenen Verwendungsfähigkeiten von noConflict() anhand von Beispielen

Dieser 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() Die Funktion übernimmt die Kontrolle über die Variable $ Yield an die erste Bibliothek, die sie 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 $("p p") verwendet wird, muss es durch jQuery("p p") ersetzt werden.

1. „$“-Operator

1. jQuery verwendet standardmäßig den „$“-Operator, und andere Frameworks wie Prototypen verwenden auch „$“, also wenn jQuery wird nach anderen Bibliotheken eingeführt, dann erhält jQuery die Nutzungsrechte „$“. 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, wird dies zu Problemen führen Damit dies nicht geschieht, wurde jquery Noconflict()

eingeführt. Die Definition von jQuery.noConflict

Die jQuery.noConflict-Methode enthält einen optionalen booleschen Parameter zur Bestimmung Übergabe der $-Referenz. Gleichzeitig wird angegeben, ob das jQuery-Objekt selbst übergeben werden soll:

jQuery.noConflict([removeAll])

Funktionsbeschreibung:

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

3. Analyse des jQuery.noConflict-Quellcodes

Am Anfang des jQuery-Quellcodes ist Folgendes zu 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 jQuery- und $-Objekte 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;
}

Schauen wir uns das oben erwähnte Problem mit der Parametereinstellung an. Wenn „deep“ nicht festgelegt ist, deckt _$ window.$ ab. Zu diesem Zeitpunkt wird der jQuery-Alias ​​​​$ ungültig, aber jQuery selbst ist 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 es sich aufgrund des von der noConflict-Methode bereitgestellten Übergabemechanismus und der Tatsache, dass sie ein nicht abgedecktes jQuery-Objekt zurückgibt, unabhängig davon, ob es sich um eine stark widersprüchliche Ausführungsumgebung wie eine Framework-Mischung oder die Koexistenz mehrerer jQuery-Versionen handelt, handelt Es kann vollständig durch Variablen abgebildet werden, um Konflikte zu lösen.

4. jQuery.noConflict-Instanz

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

jQuery.noConflict();
jQuery("p 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 ist für die meisten Plug-Ins, die nicht auf andere Bibliotheken angewiesen sind, sehr effektiv:

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("p 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("p p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("p > p").hide();  // 另一个版本 jQuery 的代码

Das obige ist der detaillierte Inhalt vonTeilen Sie die Verwendung von noConflict() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!