Partager l'utilisation de noConflict() dans jQuery

Cet article présente principalement l'utilisation de noConflict() dans jQuery. Il analyse la fonction, la définition et les compétences d'utilisation associées de noConflict() avec des exemples. Les amis dans le besoin peuvent se référer à

cet article L'exemple 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(), ceci. La fonction prend le contrôle de la variable $ Yield à 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 $("p p") est utilisé, il doit être remplacé par jQuery("p p").

1. Opérateur "$"

1. jQuery utilise l'opérateur "$" par défaut, et d'autres frameworks tels que prototype utilisent également "$", donc si jQuery est introduit après d'autres bibliothèques, alors jQuery obtiendra les droits d'utilisation "$". 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 $ si nous voulons le référencer en même temps, cela posera des problèmes afin d'éviter. cela ne se produit pas, jquery Noconflict()

a été introduit 2. La définition de jQuery.noConflict
La méthode jQuery.noConflict contient un paramètre booléen facultatif pour déterminer le. remise de la référence $ En même temps, s'il faut remettre l'objet jQuery lui-même :

jQuery.noConflict([removeAll])

Description de la fonction :

Par défaut, l'exécution de noConflict modifiera la variable $ Control est transférée à 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 l'objet jQuery lui-même à la première bibliothèque qui les a générés.

3. Analyse du code source de jQuery.noConflict
Au début du code source de jQuery, la première chose à faire est la suivante :

// 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 objets jQuery et $ dans l'environnement de fenêtre via deux variables privées pour empêcher les variables d'être é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;
}

Regardons 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 seront invalides.

L'avantage de cette opération est que peu importe qu'il s'agisse d'un environnement d'exécution très conflictuel tel qu'un mixage de framework ou une coexistence multi-version de jQuery, en raison du mécanisme de transfert fourni par la méthode noConflict et du fait qu'elle renvoie un objet jQuery non couvert , il peut être complètement cartographié via des variables pour résoudre les conflits.

4. Instance jQuery.noConflict
1. Mapper l'objet référencé par $ vers l'objet d'origine :

jQuery.noConflict();
jQuery("p 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 est très efficace pour la plupart des plug-ins 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 faire Le code est 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("p p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

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

 :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!