1. 程式人生 > >防止js全局變量汙染方法總結

防止js全局變量汙染方法總結

本想 study jquer 當前頁 解釋器 開發 href 防止 http

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變量底下,這裏只是一個示範。

本篇總結

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



本文轉載自CSDN博客--

防止js全局變量汙染方法總結