JavaScript全局变量污染问题

学习网站：http://www.vuexx.com/

引言

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

存在的问题

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

关于全局变量和window

var a = 100;
function fn1 (){
      b = 200;
}
function fn2(){
}

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

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

关于全局变量污染

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

减少污染

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

匿名函数防止变量被污染

（function(){
    var exp={};
    var name="aa";
    exp.method=function(){
        return name;
    };
    //通过window暴露exp出去，在Node.js中也有专门的模块实现这样的功能
    window.ex=exp;
})();

总结

函数可以分割作用域，如果用匿名函数包裹起来，那么里面的所用的变量和函数，都会变成局部变量，外部就无法污染了，想用什么属性，就挂在window下面开放出去就可以了
学习网站：http://www.vuexx.com/