造成污染全局变量的原因

在经典页面中，经常会有这样的引用 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();