javaScript 可以隨意定義保存所有應用資源的全局變量。但全局變量可以削弱程序靈活性，增大了模塊之間的耦合性。
在多人協作時，如果定義過多的全局變量 有可能造成全局變量沖突，也就是全局變量污染問題,以下是兩種解決辦法

一.定義全局變量命名空間 只創建一個全局變量，并定義該變量為當前應用容器，把其他全局變量追加在該命名空間下 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 ago，剛剛開始寫JS的時候，我喜歡寫一些函數在JS文件里邊，然后通過script標簽引進來，在DOM節點上綁定onclick等事件，看了很多人寫的代碼，也大多是這樣。

后來會發現，當項目小的時候這么做為了快速開發是可以接受的，然而當很多人一起開發一個Javascript大應用的時候，你會發現不同的代碼風格跟全局變量會導致很多沖突，這是一個很痛苦的事情。

曾經的經歷

用過jQuery的人就知道其主要的變量符號就是$，沒錯！因此很多項目的開發人員也要學，就自己把$定義成別的含義了，我心里對其是無敵的鄙視跟厭惡。

我曾經拿過一個項目使用jQuery的，然后上頭要我使用一個已有的富文本編輯器，這樣就有兩個JS文件了

jquery.js和editor.js，于是我要開始寫該頁面的邏輯了，我發現editor.js里邊自定義了$符號，我原本想要把它直接替換成別的標志符，但是悲劇的是，它還有一些插件也會用到，混亂的結構導致我花了很多時間去解決這個沖突。

全局Window

我們都知道，在文件中直接定義的變量跟函數（不嵌套在任何域底下的）都是屬于全局的，也就是都在當前頁面的window變量底下。例如:

function?test1(){??

}??

??

var?name;??

??

function?test2(){??

????i?=?1;??

}??

上邊代碼中的name,test1,test2和i都是屬于window底下的全局變量，也就是可以通過以下三種辦法訪問到它們：

1.直接訪問name,test1()等；

2.使用window["name"], window['test1']()等；

3.使用window.name,window.test1()等。

注意：上邊代碼中的i雖然是在test2函數里邊才出現的，因為其前面沒有使用var關鍵字，解釋器會認為它在test2的上一層定義的，依次查找上一層，直到找到window全局，如果發現還是未定義，那么將其掛在window底下成為了全局變量。

所以你直接定義的函數通通都掛到了window底下，這就是一種污染了，當很多人定義各種變量跟函數，你又得同時引入進來的時候，這個沖突的概率就變大了。

減少污染

那為了避免過多這樣的沖突，以及模塊之間的耦合性更低，需要減少這樣的污染。

此時我們會想，那不要把變量定義在全局唄，采用類似C++的命名空間，Java的包的思路就行啦。

首先就是將不同的模塊劃入到不同的全局“包”（這里的包的概念實際上就是一個Javascript對象而已）。

例如，程序員A為全局添加一個A變量，然后他把自己定義的函數/變量全部掛到A底下，這樣就跟程序員B所定義的隔離了。

再者我們可以使用函數域來隔離一些局部變量的沖突，比如說程序員A寫的代碼如下：

(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底下，從而減少了很多污染，避免了不必要的沖突。

回到過去

再次回到剛剛提過的那個經歷，如果我現在為editor.js整個包圍在function里邊，通過這種方式把$給隱藏在一個包里邊，在它的其他控件中也采取這樣的做法，當然還要做一小點改動：

/*?editor.js?*/??

(function(obj){??

????/*?原先editor里邊的內容?*/??

????/*?里邊有定義了自己的$標志?*/??

??

????obj.editor?=?obj.editor?||?{};//如果沒有editor對象，則生成一個空對象??

????obj.editor.$?=?$;//把$掛在全局的editor對象上??

})(window);??

/*?其他控件.js?*/??

(function(obj){??

????var?$?=?obj.$;//把$恢復??

??????

????/*?原先控件的內容?*/??

??????

})(window.editor);??

?

當然咯，如果editor.js有些功能需要暴露到全局的話，還需要將其進一步的掛在editor變量底下，這里只是一個示范。

本篇總結

很多框架都采用了這種做法減少全局污染，可能很多人一開始對這種做法有疑惑，這里只是個人理解拿出來分享一下，繼續歡迎交流。

轉載于:https://www.cnblogs.com/lxl57610/p/8414768.html

總結

以上是生活随笔為你收集整理的防止js全局变量污染方法总结-待续的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。