js模块历程

点击打开链接

1. 全局变量的灾难

小明定义了 i=1

小刚在后续的代码里：i=0

小明在接下来的代码里：if(i==1){...} //悲剧

 2. 函数命名冲突

项目中通常会把一些通用的函数封装成一个文件，常见的名字有utils.js、common.js...

小明定义了一个函数：function formatData(){   }

小刚想实现类似功能，于是这么写：function formatData2(){   }

小光又有一个类似功能，于是：function formatData3(){   }

......

避免命名冲突就只能这样靠丑陋的方式人肉进行。

 3. 依赖关系不好管理

b.js依赖a.js，标签的书写顺序必须是

萌芽时代的解决方案：

1. 用自执行函数来包装代码

modA = function(){     var a,b; //变量a、b外部不可见     return {          add : function(c){               a + b + c;          },          format: function(){               //......          }     }}()

这样function内部的变量就对全局隐藏了，达到是封装的目的。但是这样还是有缺陷的，modA这个变量还是暴漏到全局了，随着模块的增多，全局变量还是会越来越多。

 2. java风格的命名空间

为了避免全局变量造成的冲突，人们想到或许可以用多级命名空间来进行管理，于是，代码就变成了这个风格：

app.util.modA = xxx;app.tools.modA = xxx;app.tools.modA.format = xxx;

Yahoo的YUI早期就是这么做的，调用的时候不得不这么写：

app.tools.modA.format();

这样调用函数，写写都会觉得恶心，所以这种方式并没有被很多人采用，YUI后来也不用这种方式了。

 3. jQuery风格的匿名自执行函数

(function(window){    //代码    window.jQuery = window.$ = jQuery;//通过给window添加属性而暴漏到全局})(window);

jQuery的封装风格曾经被很多框架模仿，通过匿名函数包装代码，所依赖的外部变量传给这个函数，在函数内部可以使用这些依赖，然后在函数的最后把模块自身暴漏给window。

如果需要添加扩展，则可以作为jQuery的插件，把它挂载到$上。

这种风格虽然灵活了些，但并未解决根本问题：所需依赖还是得外部提前提供、还是增加了全局变量。