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();