Drei Minuten, um Sie durch jQuery.noConflict()_jquery zu führen

jQuery ist eines der am weitesten verbreiteten Front-End-Frameworks und eine große Anzahl von Bibliotheken und Plug-Ins von Drittanbietern wird darauf basierend entwickelt. Um eine globale Namespace-Verschmutzung zu vermeiden, stellt jQuery die Methode jQuery.noConflict() zur Lösung von Variablenkonflikten bereit. Diese Methode ist zweifellos sehr effektiv. Leider wird diese Methode in der offiziellen Dokumentation von jQuery nicht klar genug beschrieben und viele Entwickler wissen nicht, was genau passiert, wenn sie jQuery.noConflict() aufrufen, was zu vielen Problemen bei der Verwendung führt. Dennoch lohnt es sich für Webentwickler immer noch, das Implementierungsprinzip hinter jQuery.noConflict() zu erlernen und zu beherrschen, und es kann zu einem leistungsstarken Werkzeug zur Lösung von Problemen wie der globalen Namensraumverschmutzung werden.

Welche Rolle spielt jQuery.noConflict()?

jQuery.noConflict() existiert nur für einen Zweck: Es ermöglicht Ihnen, mehrere jQuery-Instanzen auf derselben Seite zu laden, insbesondere verschiedene Versionen von jQuery. Sie fragen sich vielleicht, warum Sie mehrere verschiedene Versionen von jQuery-Objekten auf einer Seite laden/verwenden müssen? Im Allgemeinen gibt es zwei Situationen. Im ersten Fall verwendet Ihr Geschäftscode die neueste Version der jQuery-Bibliothek und das von Ihnen ausgewählte Drittanbieter-Plug-in basiert auf einer früheren Version der jQuery-Bibliothek Aus verschiedenen Gründen verweist der Code auf eine ältere Version der jQuery-Bibliothek und Ihr neu entwickeltes Modul verwendet andere Versionen der jQuery-Bibliothek. In beiden Fällen müssen Sie sich dem Problem von jQuery-Objekt-/Methodenkonflikten stellen. Glücklicherweise hilft Ihnen jQuery.noConflict() bei der Lösung dieses Problems.

Was passiert, wenn jQuery geladen wird?

Wenn jQuery von der Seite referenziert/geladen wird, ist es in einer selbstausführenden Funktion (anonyme Funktion) gekapselt. Alle von ihr bereitgestellten Variablen, Funktionen und Objekte befinden sich innerhalb der ausführbaren Umgebung innerhalb der anonymen Funktion und der externen Umgebung kann nicht aufgerufen werden, um eine globale Namensraumverschmutzung zu verhindern.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery definiert zwei globale Objekte: jQuery und $ innerhalb der anonymen Funktion und stellt sich so der externen Umgebung zur Verfügung. Über diese beiden Objekte wird auf verschiedene öffentliche Methoden zugegriffen, die von Entwicklern verwendet werden, z. B. jQuery.ajax(), jQuery.css() usw. Zunächst verweisen sie auf dasselbe jQuery-Objekt (private Variablen) innerhalb der anonymen Funktion, über das auf private Variablen und Funktionen innerhalb der anonymen Funktion zugegriffen wird. Dadurch können die internen privaten Variablen und Funktionen der anonymen Funktion nach ihrer Ausführung weiterhin im Speicher verbleiben und nicht vom JavaScript-Garbage-Collection-Mechanismus gelöscht werden.

window.jQuery = window.$ = jQuery; 

Wenn jQuery von der Seite geladen wird, verfügt die aktuelle Seite möglicherweise bereits über die beiden globalen Variablen jQuery und $ (z. B. werden andere Bibliotheken von Drittanbietern geladen und diese werden auch intern definiert), was dazu führt, dass die vorhandenen Objekte vorhanden sind werden überschrieben (globale Namensraumverschmutzung). Um dieses Problem zu lösen, speichert jQuery die vorhandenen globalen Variablen intern zwischen und speichert sie für spätere Aufrufe in den privaten Variablen _jQuery und _$. Wenn also die jQuery- und $-Objekte beim Laden der jQuery-Bibliothek auf der Seite noch nicht vorhanden sind, sind _jQuery und _$ beide undefiniert; andernfalls speichern sie Verweise auf die vorhandenen jQuery- und $-Objekte (möglicherweise vom Drittanbieter). Bibliothek, auf die zuvor verwiesen wurde) Oder eine andere Version der jQuery-Bibliothek). Anschließend überschreibt jQuery diese beiden globalen Variablen und stellt sich wie oben beschrieben der externen Umgebung zur Verfügung. Zu diesem Zeitpunkt verweisen die globalen Variablen jQuery und $ auf der Seite auf die gerade eingeführte jQuery-Bibliothek.

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery; 

Die magische Wirkung von jQuery.noConflict()?

Angenommen, das von Ihnen verwaltete System verweist bereits auf die jQuery-Bibliotheksversion 1.7.0 und Sie verweisen in der neu hinzugefügten Funktion auf die jQuery-Bibliotheksversion 1.10.2. Gibt es also eine Möglichkeit, jQuery 1.7.0 wiederzuverwenden oder beide Versionen der jQuery-Bibliothek gleichzeitig zu verwenden? Die Antwort ist ja, das ist jQuery.noConflict(). Tatsächlich können Sie mit jQuery.noConflict() die globalen Variablen jQuery und $ sofort auf die zuvor referenzierten Objekte umleiten. Erstaunlich, oder? Aus diesem Grund speichert jQuery zuvor referenzierte Objekte intern zwischen, bevor es sich der Außenwelt aussetzt.

jQuery.noConflict() akzeptiert einen optionalen booleschen Parameter, normalerweise ist der Standardwert false. Welchen Einfluss wird dieser Parameter haben? Eigentlich ist es ganz einfach. Wenn jQuery.noConflict() oder jQuery.noConflict(false) aufgerufen wird, wird nur die globale Variable $ auf ihren vorherigen Referenzwert zurückgesetzt; wenn jQuery.noConflict() oder jQuery.noConflict(true) aufgerufen wird, dann die globale Variable $ wird auf seinen vorherigen Referenzwert zurückgesetzt. Sowohl jQuery als auch $ werden auf ihre vorherigen Referenzwerte zurückgesetzt. Dies ist sehr wichtig und sollte im Hinterkopf behalten werden. Wenn Sie jQuery.noConflict(false/true) aufrufen, wird die aktuelle jQuery-Instanz zurückgegeben. Mit dieser Funktion können wir jQuery umbenennen.

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

Schauen wir uns einen weiteren Codeausschnitt an, um zu testen, ob wir das magische noConflict() wirklich verstehen

<!-- jQuery and $ are undefined -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.7.0 -->
<script>jQuery.noConflict();</script>
<!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.6.4 -->
<script>var jquery164 = jQuery.noConflict( true );</script>
<!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 --> 

避免第三方库的冲突

以上的代码片段展示了如何解决多版本jQuery的冲突。接下来，我们尝试解决jQuery库和第三方库的冲突，下面出现的代码片段在jQuery的官方文档中都有，有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

直接使用No-Conflict模式

使用No-Conflict模式，其实就是对jQuery进行重命名，再调用。

<!-- 采用no-conflict模式，jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j 引用了jQuery对象本身.
$j(document).ready(function() {
$j( "div" ).hide();
});
// $ 被重新指向prototype.js里定义的对象
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script> 

使用自执行函数封装

使用这种方式，你可以在匿名函数内部继续使用标准的$对象，这也是众多jQuery插件采用的方法。需要注意的是，使用这种方法，函数内部无法再使用prototype.js定义的$对象了。

<!-- jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script> 

使用标准jQuery(document).ready()函数

如果jQuery库在其它库之前引入，那么jQuery内部定义的jQuery和$会被第三方库覆盖，这时候再使用noConflict()已经没有什么意义了。解决的方法很简单，直接使用jQuery的标准调用方式。

<!-- jquery.js在prototype.js之前被引入. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// 或者
jQuery(function($){
// Your jQuery code here, using the $
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>

下面给大家介绍jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

实例

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});

实例

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
});
});

实例

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行！");
});
});