js 避免污染全局變量

造成污染全局變量的原因

在經典頁面中，經常會有這樣的引用js

    <script src="js/index/a.js"></script>
    <script src="js/index/b.js"></script>
    <script src="js/index/c.js"></script>

a.js

function testA() {
  return 'testA';
}

b.js

function testB() {
  return 'testB';
}

上面定義的函數都是全局變量 這就造成了污染全局變量，那麼這樣有什麼危害呢？

危害

隨着項目的變大，全局變量越來越多，變量很容易覆蓋。而且訪問全局變量的時間會很長，不利於開發。

如何改良

改良後的js文件內容

a.js

let A = function() {
    function testA() {
        return 'testA';
    }
    return {
        testA: testA
    }
    
    //.....
}

把所有a.js裏面的代碼用一個函數包起來 ，這樣裏面定義的變量就由全局變量變成了局部變量，需要調用testA的時候 可以用a().testA()來實現,相當於一個js文件是一個模塊，如下：

index.js

let aInstance = new A(); //模塊名要大寫
aInstance.testA();