logo头像

求知若渴,虚心若愚

JavaScript全局变量污染问题

当我们刚接触JavaScript的时候,我们写的大部分js代码,一般都是写一些函数在JS文件里边,然后通过script标签引进来,在DOM节点上绑定onclick等事件,尤其是个人独立不太大型的项目的时候,套路基本都是这样。

1. 存在的问题

当我们开始慢慢接触一些大型项目,多人合作开发的时候,慢慢我们就会发现,这样简单的写一些js文件,然后随心所欲的开发,会出现许许多多的问题。由于每个人的编码风格不太相同,一些变量和函数的命名或多或少的会出现一些问题,尤其是这些问题导致的一些命名冲突问题,非常麻烦,非常难以发现和解决。

2. 关于全局变量和window

1
2
3
4
5
6
var a = 100;
function fn1 (){
b = 200;
}
function fn2(){
}

上面的a是全局变量,b虽然没有声明,但是也是全局可以访问的隐式全局变量,函数fn1和fn2都属于挂在window下面的全局变量
我们可以通过3中方法访问到上面的变量和函数:

  • 直接访问
  • 使用window,例如:window.a , window.fn1 , window.fn2
  • 利用中括号[] 例如:window[a]

3. 关于全局变量污染

由于大型项目多人协作开发,每个人都会创建许多js文件,如果公司有一套完整的开发命令规范,可以有效的避免许多开发中的问题,但是许多公司是没有这些开发规范的。
如果程序员A写了一个分割字符串的函数叫做fn,另一个人在另一个js文件也写了一个fn函数,功能是分割数组,那么很尴尬,这种变量污染,如果你不小心,你会调试到崩溃的。
因为你调用了fn,你以为是分割字符串,但是其实分割字符串的fn已经被分割数组的fn覆盖了,返回的结果不是,又正巧没有报错,那么调试起来很麻烦的。

4. 减少污染

为了避免过多这样的冲突,以及模块之间的耦合性更低,需要减少这样的污染,这个时候匿名函数就是我们的救星,作用就类似于C++当中的命名空间或者Java中的包(package)

5. 匿名函数防止变量被污染

1
2
3
4
5
6
7
8
9
function(){
var exp={};
var name="aa";
exp.method=function(){
return name;
};
//通过window暴露exp出去,在Node.js中也有专门的模块实现这样的功能
window.ex=exp;
})();

6. 总结

函数可以分割作用域,如果用匿名函数包裹起来,那么里面的所用的变量和函数,都会变成局部变量,外部就无法污染了,想用什么属性,就挂在window下面开放出去就可以了

支付宝打赏 微信打赏

赞赏是对我们的肯定!