JavaScriptグローバル変数汚染防止方法のまとめ

本論文の実例は、JavaScriptがグローバル変数汚染を防止する方法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
javaScriptは、アプリケーションのすべてを保存するグローバル変数を任意に定義することができます。しかし、大域変数はプログラムの柔軟性を弱め、モジュール間の結合性を増大させることができる。
複数の人が協力する場合、多すぎるグローバル変数を定義するとグローバル変数の衝突、すなわちグローバル変数汚染問題になります。以下は2つの解決方法です。
一.グローバル変数名前空間を定義する
グローバル変数を作成し、現在のアプリケーションコンテナとして定義し、他のグローバル変数を名前空間に追加します。

var MY={};
my.name={
  big_name:"zhangsan",
  small_name:"lisi"
};
my.work={
  school_work:"study",
  family_work:"we are"
};

二.匿名関数でスクリプトを包む

(function(){
  var exp={};
  var name="aa";
  exp.method=function(){
    return name;
  };
  window.ex=exp;
})();

前言
long long long agoを覚えています。JSを書き始めたばかりの時は、関数を書いてJSファイルの中にあるのが好きです。そして、scriptタグを導入して、DOMノードにonclickを結びつけるなどのイベントがあります。
その後、プロジェクトが小さい時にこのようにするのは速い開発のために受け入れられますが、多くの人が一緒にJavascriptアプリケーションを開発すると、さまざまなコードスタイルがグローバル変数と衝突することが分かります。
かつての経歴
jQueryを使ったことがある人はその主要な変数記号が$であることを知っています。間違いないです。そのため、多くのプロジェクトの開発者も学んで、自分で$を別の意味に定義しました。私の心の中では無敵という見下しと嫌悪があります。
一つのプロジェクトでjQueryを使ったことがあります。上から既存のリッチテキストエディタを使ってほしいと言われました。このようにJSファイルが二つあります。
jquery.jsとeditor.jsはこのページのロジックを書き始めます。editor.jsの中でドル記号をカスタマイズしています。元々は他のマーカーに直接交換したいですが、悲劇的なことに、まだプラグインがあります。混乱した構造は多くの時間をかけてこの衝突を解決します。
グローバルWindow
ファイルで直接定義された変数と関数（任意のドメインの下にネストされていない）は全体に属しています。つまり、現在のページのwindow変数の下にあります。たとえば:
JSコード

function test1(){
}
var name;
function test2(){
  i = 1;
}

上のコードの中のname、test 1、test 2とiはすべてwindowの下の大域変数に属しています。つまり、以下の3つの方法でそれらにアクセスできます。
1.直接name、test 1（）などを訪問する；
2.window["name"]、window['test1']()などを使用する。
3.window.name、window.test1()などを使う。
上のコードのiはtest 2の関数の中で現れたものですが、その前にvarキーワードが使われていないため、解释器はtest 2の上の階で定義されていると考えています。逐次上の階を探してwindow全体を見つけます。もし発見したらまだ定義されていないなら、それをwindowの下につるしてグローバル変数になります。
ですから、直接定義した関数は全部windowの下にかけました。これは汚染です。多くの人が各種変数と関数を定義して、また同時に導入しなければならない時、この衝突の確率は大きくなります。
汚染を減らす
このような衝突を避けるためには、モジュール間の結合性がより低く、このような汚染を減らす必要があります。
この時、変数を大域に定義しないでください。C++のような名前空間を使って、Javaのカバンの考えはいいです。
まず、異なるモジュールを異なるグローバルな「バッグ」に組み込むことです。
例えば、プログラマAはグローバルのためにA変数を追加し、彼は自分で定義した関数/変数を全部Aの下につるします。これでプログラマBが定義したものと隔離されます。
さらに、関数領域を使用して、いくつかの局所変数の衝突を隔離することができます。例えば、プログラマーAが書いたコードは以下の通りです。
JSコード:

(function(obj){
  /*            ，               */
  /*             ，         ，  obj,                 ，     window */
  var A = {};//    A 
  var tmp;//    
  A.i = 1;//        i  
  A.func = function(){alert('I am A');};
  obj.A = A;/*  A   obj   */
})(window);

この関数領域を離れると、tmpなどの局部変数が破壊されます。（クローズドの中に存在しない限り）、プログラマAが定義したものは変数window.Aの下に全部掛けられます。これによって多くの汚染が減少し、不要な衝突を避けました。
過去に戻る
もう一度先ほどの経験に戻ります。もし私がエディット.js全体をFunctionに囲まれているなら、このようにドルを一つのカバンの中に隠します。他のコントロールの中でもこのようなやり方をします。もちろん、もう一つの変更をします。
JSコード:

/* editor.js */
(function(obj){
  /*   editor      */
  /*          $   */
  obj.editor = obj.editor || {};//    editor  ，        
  obj.editor.$ = $;// $     editor   
})(window);

JSコード:

/*     .js */
(function(obj){
  var $ = obj.$;// $  
  /*         */
})(window.editor);

もちろんです。editor.jsにはグローバルに露出する機能があります。editor変数の下にさらにハングアップする必要があります。ここは単なるモデルです。
本編のまとめ
多くの枠组みがこのようなやり方を采用して、全体的な汚染を减らすことができます。
もっと多くのJavaScriptに関する内容は当駅のテーマを調べられます。「JavaScript常用関数技術のまとめ」、「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」及び「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。