Une brève analyse du mécanisme anti-conflit dans jQuery-noConflict

Source : Taobao UED

De nombreux frameworks JSbibliothèques de classes choisissent d'utiliser le symbole $ comme fonction ou nom de variable , jQuery est le plus typique. Dans jQuery, le symbole $ n'est qu'une référence de l'objet window.jQuery, donc même si $ est supprimé, window.jQuery reste un support solide pour garantir l'intégrité de l'ensemble de la bibliothèque de classes. La conception de l'API de jQuery prend pleinement en compte les conflits de références entre plusieurs frameworks. Nous pouvons utiliser la méthode jQuery.noConflict pour transférer facilement le contrôle.

La méthode jQuery.noConflict contient un paramètre booléen facultatif ^[1], qui détermine s'il faut remettre la référence $ et s'il faut remettre l'objet jQuery lui-même :

JavaScript

1	jQuery.noConflict([removeAll])

1

jQuery .noConflict([removeAll])

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 le contrôle de $ et de l'objet jQuery lui-même. Tous sont remis à la première bibliothèque qui les a générés.

Par exemple, lorsque KISSY et jQuery sont mélangés et que $ = KISSY est utilisé pour simplifier les opérations de l'API, cette méthode peut être utilisée pour résoudre le problème de conflit de noms.

Alors comment ce mécanisme est-il mis en œuvre ? Lisez le code source de jQuery au début ^[2] La première chose à faire est la suivante :

.

JavaScript

1 2 3 4 5

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

1

2

3

4

5

  // Carte sur jQuery en cas d'écrasement

     _jQuery = fenêtre.jQuery,

 // Mapper les $ en cas d'écrasement

 _$ = fenêtre .$,

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 :

.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

noConflict: fonction( profond ) {

si ( fenêtre.$ === jQuery ) {

 fenêtre.$ = _$;

 }

                si ( profond && fenêtre.jQuery === jQuery ) {

                        fenêtre.jQuery = _jQuery;

jQuery

;

        

}

Examinons 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 peu importe s'il s'agit d'un environnement d'exécution très conflictuel tel qu'un mixage de framework ou une coexistence multi-version de jQuery, du fait du mécanisme de transfert fourni par la méthode noConflict et du fait qu'elle renvoie un objet jQuery non plafonné, il est tout à fait possible de résoudre les conflits via le mappage de variables.

Mais le fait inévitable est que cela peut provoquer des problèmes tels qu'une défaillance du plug-in. Bien sûr, il peut être restauré en modifiant simplement les paramètres de contexte :

.

JavaScript

1 2 3 4 5 6

var query = jQuery.noConflict(true); (function ($) {        // 插件或其他形式的代码，也可以将参数设为 jQuery   })(query);

1

2

3

4

5

6

var requête = jQuery.noConflict(true );

( fonction ($) {

// Les plug-ins ou autres formes de code peuvent également définir des paramètres sur jQuery

})(requête);

[1] http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict-removeAll[2] https://github.com/jquery/jquery/blob/master/src/core.js

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!