js避免污染全局变量

摘要：造成污染全局变量的原因？在经典页面中，经常会有这样的引用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();

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！