Beispiele zur Erläuterung, wie Sie JavaScript-Konflikte vermeiden können

Das Beispiel in diesem Artikel erklärt, wie man Konflikte in Javascript vermeidet. Freunde, die es benötigen, können es erfahren

[1] Ingenieur A schreibt Funktion A

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

[2] Ingenieur B fügt neue Funktion B hinzu

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

[3] Im vorherigen Schritt definierte Ingenieur B die Variable a mit demselben Namen, ohne es zu wissen, was zu a führte Konflikt. Verwenden Sie also eine anonyme Funktion, um das Skript zu umschließen, sodass der Variablenbereich innerhalb der anonymen Funktion gesteuert wird.

//功能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] Zu diesem Zeitpunkt werden der Webseite neue Anforderungen hinzugefügt und die Variable b in Funktion A muss verwendet werden. Definieren Sie also eine globale Variable im Fensterbereich und verwenden Sie sie als Brücke, um die Kommunikation zwischen anonymen Funktionen abzuschließen

//全局变量
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] Aber wenn Funktion C Wir brauchen auch Variable a in Funktion A. Zu diesem Zeitpunkt müssen wir eine weitere globale Variable definieren

//全局变量
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] Da anonyme Funktionen jedoch miteinander kommunizieren müssen, werden mehr Variablen benötigt , desto mehr globale Variablen werden benötigt. Daher ist es notwendig, die Anzahl globaler Variablen streng zu kontrollieren. Durch die Verwendung von Hash-Objekten als globale Variablen können die erforderlichen Variablen als Attribute des Objekts verwendet werden, wodurch sichergestellt werden kann, dass die Anzahl globaler Variablen klein genug und die Skalierbarkeit sehr gut ist 🎜>

//全局变量
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] Wenn Funktion D jedoch hinzugefügt wird, muss Funktion D mit Funktion B kommunizieren und die Variable a im Funktions-B-Skript verwenden D ist Ingenieur 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] Da sich Ingenieur Ding nur um seine eigene anonyme Funktion und die anonyme Funktion von Funktion B kümmert, überschreibt die Verwendung von GLOBAL.str versehentlich die Variable mit Gleicher Name in Funktion A festgelegt, was zu einem Fehler in Funktion C führt. Daher verwenden wir Namespaces, um dieses Problem zu lösen. Deklarieren Sie je nach Funktion einen anderen Namespace. Dann sollten die Attribute des GLOBAL-Objekts nicht direkt an das GLOBAL-Objekt gehängt werden Namespace der anonymen Funktion

//全局变量
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] Wenn das Programm in derselben anonymen Funktion sehr komplex ist und viele Variablennamen hat, kann der Namespace weiter erweitert werden Sekundären Namespace generieren

//以功能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] Da das Generieren eines Namespace eine sehr häufige Funktion ist, wird die Funktion zum Generieren eines Namespace weiter als Funktion zum einfachen Aufrufen definiert, und die vollständige Version ist dies neu geschrieben Der endgültige Code lautet wie folgt

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] Das Codekonfliktproblem wurde gelöst, aber die Wartbarkeit ist nicht gut. Jetzt müssen wir beispielsweise Ingenieur A bitten, Funktion B zu ändern. Da es sich bei dem von Ingenieur A geschriebenen Skript um Funktion A handelt, kennt er die Skriptsituation von Funktion B nicht. Um diese Situation zu verbessern, müssen dem Code entsprechende Kommentare hinzugefügt werden.

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
})();

Um Javascript-Konflikte zu vermeiden, müssen Sie

• 　　[1 ] Vermeiden Sie die Verbreitung globaler Variablen

• 　[2] Angemessene Verwendung von Namespaces

• 　[3] Fügen Sie dem Code die erforderlichen Kommentare hinzu

Das Obige ist der detaillierte Inhalt dieses Artikels, I Ich hoffe, es wird für die Lernhilfe aller nützlich sein.

【Empfohlene verwandte Tutorials】

1.

JavaScript-Video-Tutorial2.
JavaScript-Online-Handbuch3 Bootstrap-Tutorial