很好的前端模块化科普文
在ajax还未提出之前，js还只是一种“玩具语言”，由Brendan Eich花了不到十天时间发明，用来在网页上进行表单校验、实现简单的动画效果等等，你可以回想一下那个网页上到处有公告块飘来飘去的时代。
这个时候并没有前端工程师，服务端工程师只需在页面上随便写写js就能搞定需求。那个时候的前端代码大概像这样：
JavaScript| 1 2 3 4 5 6 7 8 9 10 11 12 | if ( xx ) { //....... } else { //xxxxxxxxxxx } for ( var i = 0 ; i < 10 ; i ++ ) { //........ } element . onclick = function ( ) { //....... } |
代码简单的堆在一起，只要能从上往下依次执行就可以了。
| 1 2 | |
顺序不能错，也不能漏写某个。在多人开发的时候很难协调。
萌芽时代的解决方案： 1. 用自执行函数来包装代码 JavaScript
| 1 2 3 4 5 6 7 8 9 10 11 | modA = function ( ) { var a , b ; //变量a、b外部不可见 return { add : function ( c ) { a + b + c ; } , format : function ( ) { //...... } } } ( ) |
这样function内部的变量就对全局隐藏了，达到是封装的目的。但是这样还是有缺陷的，modA这个变量还是暴漏到全局了，随着模块的增多，全局变量还是会越来越多。 2. java风格的命名空间 为了避免全局变量造成的冲突，人们想到或许可以用多级命名空间来进行管理，于是，代码就变成了这个风格： JavaScript
| 1 2 3 | app . util . modA = xxx ; app . tools . modA = xxx ; app . tools . modA . format = xxx ; |
Yahoo的YUI早期就是这么做的，调用的时候不得不这么写：
JavaScript
| 1 | app . tools . modA . format ( ) ; |
这样调用函数，写写都会觉得恶心，所以这种方式并没有被很多人采用，YUI后来也不用这种方式了。 3. jQuery风格的匿名自执行函数 JavaScript
| 1 2 3 4 5 | ( function ( window ) { //代码 window . jQuery = window . $ = jQuery ; //通过给window添加属性而暴漏到全局 } ) ( window ) ; |
jQuery的封装风格曾经被很多框架模仿，通过匿名函数包装代码，所依赖的外部变量传给这个函数，在函数内部可以使用这些依赖，然后在函数的最后把模块自身暴漏给window。
如果需要添加扩展，则可以作为jQuery的插件，把它挂载到$上。 这种风格虽然灵活了些，但并未解决根本问题：所需依赖还是得外部提前提供、还是增加了全局变量。
1. 模块的标识应遵循的规则（书写规范） 2. 定义全局函数require，通过传入模块标识来引入其他模块，执行的结果即为别的模块暴漏出来的API 3. 如果被require函数引入的模块中也包含依赖，那么依次加载这些依赖 4. 如果引入模块失败，那么require函数应该报一个异常 5. 模块通过变量exports来向往暴漏API，exports只能是一个对象，暴漏的API须作为此对象的属性。此规范一出，立刻产生了良好的效果，由于其简单而直接，在nodejs中，这种模块化方案立刻被推广开了。 遵循commonjs规范的代码看起来是这样的：（来自官方的例子） JavaScript
| 1 2 3 4 5 6 7 8 | //math.js exports . add = function ( ) { var sum = 0 , i = 0 , args = arguments , l = args . length ; while ( i < l ) { sum += args [ i ++ ] ; } return sum ; } ; |
JavaScript
| 1 2 3 4 5 | //increment.js var add = require ( 'math' ) . add ; exports . increment = function ( val ) { return add ( val , 1 ) ; } ; |
JavaScript
| 1 2 3 4 | //program.js var inc = require ( 'increment' ) . increment ; var a = 1 ; inc ( a ) ; // 2 |
