JavaScript 충돌을 방지하는 방법을 설명하는 예

이 기사의 예에서는 javascript에서 충돌을 피하는 방법을 설명합니다. 필요한 친구는 이에 대해 알아볼 수 있습니다.

[1] 엔지니어 A가 함수 A를 작성합니다

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

[2] 엔지니어 B가 새로운 함수 B를 추가합니다

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

[3] 이전 단계에서 엔지니어 B는 자신도 모르게 같은 이름의 변수 a를 정의하여 갈등. 따라서 익명 함수를 사용하여 스크립트를 래핑하면 변수 범위가 익명 함수 내에서 제어됩니다.

//功能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] 이때 웹 페이지에 함수 C가 추가되고, 함수 A의 변수 b를 사용해야 하는 경우가 있습니다. 따라서 창 범위 아래에 전역 변수를 정의하고 이를 브리지로 사용하여 익명 함수 간의 통신을 완료합니다

//全局变量
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] 그러나 함수 C도 필요합니다. 함수 A에 변수 a가 있습니다. 이때 또 다른 전역 변수를 정의해야 합니다

//全局变量
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]. 하지만 익명 함수는 서로 통신해야 하기 때문에 더 많은 변수가 필요합니다. , 더 많은 전역 변수가 필요합니다. 따라서 전역 변수의 수를 엄격하게 제어할 필요가 있습니다. 해시 객체를 전역 변수로 사용하면 필요한 변수를 객체의 속성으로 사용할 수 있으므로 전역 변수의 수가 충분히 적고 확장성이 매우 좋습니다

//全局变量
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] 하지만 함수 D가 추가되면 함수 D는 함수 B와 통신해야 하고 함수 B 스크립트에서 변수 a를 사용해야 합니다. D는 엔지니어 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] 엔지니어 Ding은 자신의 익명 함수와 함수 B의 익명 함수에만 관심이 있으므로 GLOBAL.str을 사용하면 실수로 변수를 함수 A에 동일한 이름이 설정되어 함수 C에서 오류가 발생합니다. 따라서 우리는 이 문제를 해결하기 위해 네임스페이스를 사용합니다. 다른 익명 함수에서 함수에 따라 다른 네임스페이스를 선언합니다. 그런 다음 각 익명 함수의 GLOBAL 객체 속성은 GLOBAL 객체에 직접 매달리지 않고 여기에 매달아야 합니다. 익명 함수의 네임스페이스

//全局变量
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] 동일한 익명 함수의 프로그램이 매우 복잡하고 변수 이름이 많은 경우 네임스페이스를 다음과 같이 추가로 확장할 수 있습니다. generate Secondary 네임스페이스

//以功能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] 네임스페이스 생성은 매우 일반적인 기능이므로 네임스페이스 생성 기능을 더 쉽게 호출하기 위한 기능으로 정의하고, 완성본은 다음과 같습니다. 다시 작성한 최종 코드는 다음과 같습니다

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] 코드 충돌 문제는 해결되었으나 유지보수성이 강하지 않습니다. 예를 들어 이제 엔지니어 A에게 기능 B를 수정하도록 요청해야 합니다. 엔지니어 A가 작성한 스크립트는 함수 A에 관한 것이므로 함수 B의 스크립트 상황을 알지 못합니다. 이러한 상황을 개선하려면 코드에 적절한 주석을 추가해야 합니다.

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

Javascript 충돌을 방지하려면

• 　　[1 ] 전역 변수의 확산 방지

• 　[2] 네임스페이스의 합리적인 사용

• 　[3] 코드에 필요한 주석 추가

위 내용은 이 글의 상세 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
2. JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼