Trois minutes pour vous guider dans jQuery.noConflict()_jquery

jQuery est l'un des frameworks front-end les plus utilisés, et un grand nombre de bibliothèques et de plug-ins tiers sont développés sur cette base. Afin d'éviter la pollution globale de l'espace de noms, jQuery fournit la méthode jQuery.noConflict() pour résoudre les conflits de variables. Cette méthode est sans aucun doute très efficace. Malheureusement, la documentation officielle de jQuery ne décrit pas cette méthode de manière suffisamment claire et de nombreux développeurs ne savent pas exactement ce qui se passe lorsqu'ils appellent jQuery.noConflict(), ce qui entraîne de nombreux problèmes lors de son utilisation. Malgré cela, le principe de mise en œuvre derrière jQuery.noConflict() mérite toujours d'être appris et maîtrisé par les développeurs Web, et il peut devenir un outil puissant pour résoudre des problèmes tels que la pollution mondiale des espaces de noms.

Quel est le rôle de jQuery.noConflict() ?

jQuery.noConflict() n'existe que dans un seul but : il vous permet de charger plusieurs instances jQuery sur la même page, notamment différentes versions de jQuery. Vous vous demandez peut-être pourquoi avez-vous besoin de charger/utiliser plusieurs versions différentes d'objets jQuery sur une seule page ? De manière générale, il existe deux situations. Dans le premier cas, votre code métier utilise la dernière version de la bibliothèque jQuery et le plug-in tiers que vous choisissez s'appuie sur une version antérieure de la bibliothèque jQuery ; dans le second cas, vous gérez un système qui dispose déjà de cette version. business Pour diverses raisons, le code fait référence à une ancienne version de la bibliothèque jQuery et votre module nouvellement développé utilise d'autres versions de la bibliothèque jQuery. Dans les deux cas, vous devez faire face au problème des conflits objet/méthode jQuery. Heureusement, jQuery.noConflict() vous aide à résoudre ce problème.

Que se passe-t-il lorsque jQuery est chargé ?

Lorsque jQuery est référencé/chargé par la page, il est encapsulé dans une fonction auto-exécutable (fonction anonyme). Toutes les variables, fonctions et objets qu'il fournit se trouvent dans l'environnement exécutable à l'intérieur de la fonction anonyme et dans l'environnement externe. ne peut pas être appelé pour empêcher la pollution mondiale de l'espace de noms.

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

jQuery définit deux objets globaux : jQuery et $ à l'intérieur de la fonction anonyme, s'exposant à l'environnement externe. Diverses méthodes publiques utilisées par les développeurs sont accessibles via ces deux objets, tels que jQuery.ajax(), jQuery.css(), etc. Initialement, ils pointent vers le même objet jQuery (variables privées) à l'intérieur de la fonction anonyme, via lequel on accède aux variables et fonctions privées à l'intérieur de la fonction anonyme. Cela permet aux variables privées internes et aux fonctions de la fonction anonyme de toujours résider dans la mémoire après son exécution et ne seront pas effacées par le mécanisme de récupération de place JavaScript.

window.jQuery = window.$ = jQuery; 

Lorsque jQuery est chargé par la page, la page actuelle peut déjà avoir les deux variables globales jQuery et $ (par exemple, d'autres bibliothèques tierces sont chargées, et elles sont également définies en interne), ce qui entraînera l'apparition d'objets existants sont écrasés (pollution mondiale des espaces de noms). Afin de résoudre ce problème, jQuery met en cache en interne les variables globales existantes et les enregistre dans les variables privées _jQuery et _$ pour les appels ultérieurs. Par conséquent, si les objets jQuery et $ n'existent pas encore lorsque la bibliothèque jQuery est chargée sur la page, alors _jQuery et _$ sont tous deux indéfinis, sinon ils enregistreront les références aux jQuery et $ existants (peut-être provenant d'un tiers ; bibliothèque référencée précédemment) Ou une version différente de la bibliothèque jQuery). Ensuite, jQuery écrasera ces deux variables globales et s'exposera à l'environnement externe comme décrit ci-dessus. À ce stade, les variables globales jQuery et $ sur la page pointent vers la bibliothèque jQuery qui vient d'être introduite.

// 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; 

L'effet magique de jQuery.noConflict() ?

Supposons que le système que vous gérez fasse déjà référence à la bibliothèque jQuery version 1.7.0 et que vous référencez la bibliothèque jQuery version 1.10.2 dans la fonction nouvellement ajoutée. Alors, existe-t-il un moyen de réutiliser jQuery 1.7.0 ou d'utiliser les deux versions de la bibliothèque jQuery en même temps ? La réponse est oui, c'est jQuery.noConflict(). En fait, en utilisant jQuery.noConflict(), vous pouvez immédiatement rediriger les variables globales jQuery et $ vers les objets précédemment référencés. Incroyable, non ? C'est pourquoi jQuery met en cache en interne les objets précédemment référencés avant de s'exposer au monde extérieur.

jQuery.noConflict() accepte un paramètre booléen facultatif, généralement la valeur par défaut est false. Quel impact aura ce paramètre ? En fait, c'est très simple. Si jQuery.noConflict() ou jQuery.noConflict(false) est appelé, seule la variable globale $ sera réinitialisée à sa valeur de référence précédente si jQuery.noConflict() ou jQuery.noConflict(true) est appelée, alors la variable globale ; $ sera réinitialisé à sa valeur de référence précédente. JQuery et $ seront réinitialisés à leurs valeurs de référence précédentes. Ceci est très important et il est recommandé de le garder à l’esprit. Lorsque vous appelez jQuery.noConflict(false/true), il renverra l'instance jQuery actuelle. Grâce à cette fonctionnalité, nous pouvons renommer jQuery.

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

Regardons un autre extrait de code pour tester si nous comprenons vraiment le magique noConflict()

<!-- 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 仍在运行！");
});
});