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] この時点で、Web ページに関数 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] 同じ匿名関数内のプログラムが非常に複雑で、多くの変数名がある場合、名前空間をさらに拡張できます。セカンダリ名前空間の生成

//以功能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.ブートストラップ チュートリアル