Exemple d'analyse de l'utilisation de noConflict() dans jQuery_jquery

L'exemple de cet article décrit l'utilisation de noConflict() dans jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

jQuery utilise l'opérateur "$" par défaut. Le symbole $ est juste une référence à l'objet window.jQuery, jQuery.noConflict(). Cette fonction transfère le contrôle de la variable $ à la première bibliothèque qui l'implémente. Cela permet de garantir que jQuery n'entre pas en conflit avec les $objects d'autres bibliothèques. Après avoir exécuté cette fonction, vous ne pouvez accéder qu'aux objets jQuery à l'aide de variables jQuery. Par exemple, lorsque $("div p") est utilisé, il doit être remplacé par jQuery("div p").

1. Opérateur "$"

1. jQuery utilise l'opérateur "$" par défaut, et d'autres frameworks tels que prototype utilisent également "$". Par conséquent, si jQuery est introduit après d'autres bibliothèques, alors jQuery obtiendra le droit d'utiliser "$". Cette situation est facile à comprendre, après tout, JS est exécuté de haut en bas.

2. Si jQuery est introduit avant d'autres bibliothèques qui utilisent "$", alors jQuery n'occupera pas "$".

Astuce : Cette méthode est utile lorsque d'autres bibliothèques JavaScript utilisent $ pour leurs fonctions.

Nous utilisons tous $ pour obtenir des variables dans jquery, mais il existe de nombreux plug-ins qui peuvent utiliser le symbole $ en même temps, cela posera des problèmes pour empêcher cela. se passe.noconflict()

2. Définition de jQuery.noConflict

La méthode jQuery.noConflict contient un paramètre booléen facultatif qui détermine s'il faut transmettre la référence $ avec l'objet jQuery lui-même :

jQuery.noConflict([removeAll])

Description de la fonction :

Par défaut, l'exécution de noConflict transférera le contrôle de la variable $ à la première bibliothèque qui génère $ ; lorsque RemoveAll est défini sur true, l'exécution de noConflict transférera tout le contrôle de $ et de l'objet jQuery lui-même à la première bibliothèque à les générer. .

3. Analyse du code source de jQuery.noConflict

Au début du code source jQuery, la première chose à faire est ceci :

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

Il est facile de comprendre que jQuery mappe les deux objets jQuery et $ dans l'environnement de fenêtre via deux variables privées pour éviter que les variables ne soient écrasées de force. Une fois la méthode noConflict appelée, la différence entre _jQuery, _$, jQuery, $ est utilisée pour déterminer la méthode de transfert de contrôle. Le code spécifique est le suivant :

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

En regardant le problème de configuration des paramètres mentionné ci-dessus, si deep n'est pas défini, _$ couvre window.$ À ce stade, l'alias jQuery $ devient invalide, mais jQuery lui-même est intact. Si une autre bibliothèque ou un autre code redéfinit la variable $, le contrôle de celle-ci est complètement transféré. D'un autre côté, si deep est défini sur true, _jQuery écrase window.jQuery et $ et jQuery ne seront pas valides.
L'avantage de cette opération est que qu'il s'agisse d'un mélange de frameworks ou d'un environnement d'exécution très conflictuel comme la coexistence de plusieurs versions de jQuery, du fait du mécanisme de handover fourni par la méthode noConflict et de son retour d'objets jQuery non couverts, elle peut être complètement résolu par un conflit de mappage de variables.

4. Instance jQuery.noConflict

1. Mappez l'objet référencé par $ vers l'objet d'origine :

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

2. Restaurez l'utilisation de l'alias $, puis créez et exécutez une fonction, et utilisez toujours $ comme alias pour jQuery dans le cadre de cette fonction. Dans cette fonction, l'objet $ d'origine n'est pas valide. Cette fonction fonctionne bien pour la plupart des plugins qui ne s'appuient pas sur d'autres bibliothèques :

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

3. Vous pouvez combiner jQuery.noConflict() avec l'abrégé ready pour rendre le code plus compact :

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

4. Créez un nouvel alias pour utiliser l'objet jQuery dans la bibliothèque suivante :

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

5. Déplacez complètement jQuery vers un nouvel espace de noms :

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

J'espère que cet article sera utile à la programmation jQuery de chacun.