Maison >interface Web >js tutoriel >Décomposition du principe d'implémentation de la fonction noconflict dans jQuery_jquery

Décomposition du principe d'implémentation de la fonction noconflict dans jQuery_jquery

WBOY
WBOYoriginal
2016-05-16 16:16:061186parcourir

Dans jQuery, noconflict est une méthode importante utilisée pour éviter les conflits de variables et libérer le contrôle des variables. Nous savons que jQuery fournit deux variables globales au monde extérieur, $ et jQuery. Bien que jQuery ne génère que deux variables globales, des conflits ne se produiront que dans de rares cas. Cependant, si la page Web contient plus de bibliothèques de classes, il y aura automatiquement un conflit. se produit lors de la définition de $ ou de l'existence d'une variable globale jQuery.

La fonction noconflict fournie par jQuery résout très bien le problème des conflits de variables. Qu'il s'agisse d'un conflit $ ou jQuery, il peut être résolu. Ensuite, analysons la gestion des conflits par jQuery.

Tout d'abord, jetons un coup d'œil à l'implémentation de noconflict dans le code source de jQuery :

(function(window,undefined){
var 
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ){
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}
})
}(window)


Ici, jQuery.extend est la méthode de jQuery pour étendre les propriétés statiques. Cela peut être considéré comme attachant directement la méthode noConflict à jQuery. Dans la fonction anonyme, définissez respectivement les variables internes _jQuery et _$ pour stocker window.jQuery et window.$. Le but est d'utiliser des variables internes pour enregistrer l'état de ces deux variables globales avant l'exécution de jQuery, afin qu'elles puissent. être utilisé ultérieurement. Ces deux variables sont restituées dans l'opération anti-collision. noConflict peut gérer le conflit entre les deux variables $ et jQuery. Il gère $ par défaut si un vrai paramètre est transmis, le conflit jQuery sera géré.
window.$ === jQuery est utilisé pour déterminer si la variable globale est égale à jQuery. Si elle est égale, la variable globale $ est restaurée dans la variable avant l'exécution de jQuery (stockée dans la variable interne _$) ; window.jQuery === jQuery Lorsque la gestion des conflits profonds est activée et que la variable globale jQuery est égale au jQuery interne, le jQuery global est restauré à son état précédent. L'importance de juger window.$ === jQuery et window.jQuery=jQuery est de protéger les variables définies contre l'écrasement, comme le code suivant :

//引入jQuery库
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jQuery这句判断,那么$将会等于undefined而不是"String"。
console.log(jQuery); //同上,如果没有判断window.jQuery===jQuery,重新定义的jQuery就会被undefined覆盖。

L'ensemble du processus de fonctionnement est illustré dans la figure ci-dessous :

noConflict renvoie le constructeur jQuery dans la bibliothèque jQuery, utilisez-le comme $ !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn