Exemples pour expliquer comment éviter les conflits JavaScript

L'exemple de cet article explique comment éviter les conflits en javascript. Les amis qui en ont besoin peuvent en apprendre davantage

[1] L'ingénieur A écrit la fonction A

var a = 1;
var b = 2;
alert(a+b);//3

[2] L'ingénieur B ajoute une nouvelle fonction B

var a = 2;
var b = 1;
alert(a-b);//1

[3] Dans l'étape précédente, l'ingénieur B a défini la variable a avec le même nom sans le savoir, provoquant un conflit. Utilisez donc une fonction anonyme pour envelopper le script, afin que la portée de la variable soit contrôlée au sein de la fonction anonyme.

//功能A
(function(){
　　var a = 1;
　　var b = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();

[4] À l'heure actuelle, de nouvelles exigences sont ajoutées à la page Web et la variable b dans la fonction A doit être utilisée. Définissez donc une variable globale sous la portée de la fenêtre et utilisez-la comme pont pour compléter la communication entre les fonctions anonymes

//全局变量
var str;
//功能A
(function(){
　　var a = 1;
　　//将b的值赋给str
　　var b = str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将str的值赋给b
　　var b = str;
　　alert(b);//2
})();

[5] Mais si la fonction C nous avons aussi besoin variable a dans la fonction A. À ce stade, nous devons définir une autre variable globale

//全局变量
var str,str1;
//功能A
(function(){
　　//将a的值赋给str1
　　var a = str1 = 1;
　　//将b的值赋给str
　　var b = str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将str1的值赋给a
　　var a = str1;
　　//将str的值赋给b
　　var b = str;
　　alert(a*b);//2
})();

[6] Mais comme les fonctions anonymes doivent communiquer entre elles, plus de variables sont nécessaires , plus il faut de variables globales. Par conséquent, il est nécessaire de contrôler strictement le nombre de variables globales. L'utilisation d'objets de hachage comme variables globales peut utiliser les variables requises comme attributs de l'objet, ce qui peut garantir que le nombre de variables globales est suffisamment petit et que l'évolutivité est très bonne. 🎜>

//全局变量
var GLOBAL = {};
//功能A
(function(){
　　//将a的值赋给GLOBAL.str1
　　var a = GLOBAL.str1 = 1;
　　//将b的值赋给GLOBAL.str
　　var b = GLOBAL.str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将GLOBAL.str1的值赋给a
　　var a = GLOBAL.str1;
　　//将GLOBAL.str的值赋给b
　　var b = GLOBAL.str;
　　alert(a*b);//2
})();

[7] Mais si la fonction D est ajoutée, la fonction D doit communiquer avec la fonction B et utiliser la variable a dans le script de la fonction B. D est l'ingénieur Ding

//全局变量
var GLOBAL = {};
//功能A
(function(){
　　//将a的值赋给GLOBAL.str1
　　var a = GLOBAL.str1 = 1;
　　//将b的值赋给GLOBAL.str
　　var b = GLOBAL.str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　//将a的值赋给GLOBAL.str1
　　var a = GLOBAL.str1 = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将GLOBAL.str1的值赋给a
　　var a = GLOBAL.str1;
　　//将GLOBAL.str的值赋给b
　　var b = GLOBAL.str;
　　alert(a*b);//2
})();
//功能D
(function(){
　　//将GLOBAL.str1的值赋给a
　　var a = GLOBAL.str1;
　　alert(a*2);//4
})();

[8] Puisque l'ingénieur Ding ne se soucie que de sa propre fonction anonyme et de la fonction anonyme de la fonction B, l'utilisation de GLOBAL.str écrase accidentellement la variable avec le même nom défini dans la fonction A, provoquant une erreur dans la fonction C. . Nous utilisons donc des espaces de noms pour résoudre ce problème. Sous différentes fonctions anonymes, déclarez un espace de noms différent en fonction de la fonction. Ensuite, les attributs de l'objet GLOBAL dans chaque fonction anonyme ne doivent pas être directement accrochés à l'objet GLOBAL, mais suspendus ici. espace de noms de la fonction anonyme

//全局变量
var GLOBAL = {};
//功能A
(function(){
　　GLOBAL.A = {};
　　//将a的值赋给GLOBAL.A.str1
　　var a = GLOBAL.A.str1 = 1;
　　//将b的值赋给GLOBAL.A.str
　　var b = GLOBAL.A.str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　GLOBAL.B = {};
　　//将a的值赋给GLOBAL.B.str1
　　var a = GLOBAL.B.str1 = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将GLOBAL.A.str1的值赋给a
　　var a = GLOBAL.A.str1;
　　//将GLOBAL.A.str的值赋给b
　　var b = GLOBAL.A.str;
　　alert(a*b);//2
})();
//功能D
(function(){
　　//将GLOBAL.B.str1的值赋给a
　　var a = GLOBAL.B.str1;
　　alert(a*2);//4
})();

[9] Si le programme dans la même fonction anonyme est très complexe et comporte de nombreux noms de variables, l'espace de noms peut être étendu davantage pour générer un espace de noms secondaire

//以功能A为例
(function(){
　　var a = 1, b = 2;
　　GLOBAL.A = {};
　　GLOBAL.A.CAT = {};
　　GLOBAL.A.DOG = {};
　　GLOBAL.A.CAT.name = 'mimi';
　　GLOBAL.A.DOG.name = 'xiaobai';
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.B.str = b;  
})();

[10] Parce que la génération d'un espace de noms est une fonction très courante, la fonction de génération d'espace de noms est définie plus en détail comme une fonction pour un appel facile, et la version complète est réécrit Le code final est le suivant

var GLOBAL = {};
GLOBAL.namespace = function(str){
　　var arr = str.split('.');
　　var o = GLOBAL;
　　var start = 0;
　　if(arr[0] == 'GLOBAL'){
　　　　start = 1;
　　}else{
　　　　start = 0;
　　}
　　for(var i = start; i < arr.length; i++){
　　　　o[arr[i]] = o[arr[i]] || {};
　　　　o = o[arr[i]];
　　}
};
//功能A
(function(){
　　var a = 1;
　　var b = 2;
　　GLOBAL.namespace(&#39;A.CAT&#39;);
　　GLOBAL.namespace(&#39;A.DOG&#39;);
　　GLOBAL.A.CAT.name = &#39;mimi&#39;;
　　GLOBAL.A.DOG.name = &#39;xiaobai&#39;;
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.A.str = b;  
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　GLOBAL.namespace(&#39;B&#39;);
　　GLOBAL.B.str1 = a;
　　alert(a-b);//1
})();
//功能C
(function(){
　　var a = GLOBAL.A.str1;
　　var b = GLOBAL.A.str;
　　alert(a*b);//2
})();
//功能D
(function(){
　　var a = GLOBAL.B.str1;
　　alert(a*2);//4
})();

[11] Le problème de conflit de code a été résolu, mais la maintenabilité n'est pas forte. Par exemple, nous devons maintenant demander à l’ingénieur A de modifier la fonction B. Étant donné que le script écrit par l'ingénieur A concerne la fonction A, il ne connaît pas la situation du script de la fonction B. Afin d'améliorer cette situation, des commentaires appropriés doivent être ajoutés au code.

var GLOBAL = {};
GLOBAL.namespace = function(str){
　　var arr = str.split('.');
　　var o = GLOBAL;
　　var start = 0;
　　if(arr[0] == 'GLOBAL'){
　　　　start = 1;
　　}else{
　　　　start = 0;
　　}
　　for(var i = start; i < arr.length; i++){
　　　　o[arr[i]] = o[arr[i]] || {};
　　　　o = o[arr[i]];
　　}
};
/*
* @method 功能A:实现加法运算
* @author 工程师甲
* @connect 1234567
* @time 2015-01-01
*/

(function(){
　　var a = 1;
　　var b = 2;
　　GLOBAL.namespace(&#39;A.CAT&#39;);
　　GLOBAL.namespace(&#39;A.DOG&#39;);
　　GLOBAL.A.CAT.name = &#39;mimi&#39;;
　　GLOBAL.A.DOG.name = &#39;xiaobai&#39;;
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.A.str = b;  
　　alert(a+b);//3
})();
/*
* @method 功能B:实现减法运算
* @author 工程师乙
* @connect 1234567
* @time 2015-01-01
*/
(function(){
　　var a = 2;
　　var b = 1;
　　GLOBAL.namespace(&#39;B&#39;);
　　GLOBAL.B.str1 = a;
　　alert(a-b);//1
})();
/*
* @method 功能C:实现乘法运算
* @author 工程师丙
* @connect 1234567
* @time 2015-01-01
*/
(function(){
　　var a = GLOBAL.A.str1;
　　var b = GLOBAL.A.str;
　　alert(a*b);//2
})();
/*
* @method 功能D:实现乘2运算
* @author 工程师丁
* @connect 1234567
* @time 2015-01-01
*/
(function(){
　　var a = GLOBAL.B.str1;
　　alert(a*2);//4
})();

Pour éviter les conflits javascript, vous devez

• 　　[1 ] Éviter la prolifération des variables globales

• 　[2] Utilisation raisonnable des espaces de noms

• 　[3] Ajouter les commentaires nécessaires au code

Ce qui précède est le contenu détaillé de cet article, je j'espère que cela sera utile pour l'aide à l'apprentissage de chacun.

【Tutoriels associés recommandés】

1.

Tutoriel vidéo JavaScript2
Manuel en ligne JavaScript3. tutoriel bootstrap