前端之旅：模块化

最主要的目的：

• 解决命名冲突
• 依赖管理
• 提高代码可读性
• 代码解耦，提高复用性

前端模块化框架肩负着 模块管理、资源加载 两项重要的功能，这两项功能与工具、性能、业务、部署等工程环节都有着非常紧密的联系。因此，模块化框架的设计应该最高优先级考虑工程需要。

CMD or AMD or xMD

• CommonJS 主要用于服务器端，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。由于CommonJS无法直接应用于浏览器端，所以在CommonJS从服务端向前端进军的过程中，分裂出了：

  1. Modules/1.x派 认为，在现有基础上进行改进即可满足浏览器端的需要，既然浏览器端需要function包装，需要异步加载，那么新增一个方案，能把现有模块转化为适合浏览器端的就行了。
  2. Modules/Async派 认为浏览器与服务器环境差别太大，不能沿用旧的模块标准。既然浏览器必须异步加载代码，那么模块在定义的时候就必须指明所依赖的模块，然后把本模块的代码写在回调函数里。这就是后来从CommonJS分离出去的AMD
  3. Modules/2.0派 有点像“中间派”，既不想丢掉旧的规范，也不想像AMD那样推到重来。最终采用了Modules/Wrappings的方式

• UMD 是 “Universal Module Definition” 的缩写，提供了一系列模式同时兼容 CommonJS 和 AMD ，代价是代码有些丑陋。

• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
  由于requirejs有不甚优雅的地方，所以必然会有新东西来完善它，这就是后起之秀seajs，seajs的作者是国内大牛淘宝前端布道者玉伯。seajs全面拥抱Modules/Wrappings规范，不用requirejs那样回调的方式来编写模块。而它也不是完全按照Modules/Wrappings规范

• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD和CMD的区别

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

前端工程化

对于前端工程化的内容，内容太对不是三言两语可以讲清楚的，而且它也不像其他几个方面那样可以通过看一时半会别人的博客就能够学会的。当然如果是相关工具的话，在我前面博客中提到的gulp就算是前端工程化的一方面了，还有后面应该会学习的Webpack。

参考

http://www.cnblogs.com/lvdabao/p/js-modules-develop.html
http://www.cnblogs.com/jinguangguo/archive/2013/04/06/3002515.html
https://github.com/seajs/seajs/issues/588
https://github.com/seajs/seajs/issues/547
https://github.com/fouber/blog/issues/4
https://github.com/seajs/seajs/issues/277
https://github.com/seajs/seajs/issues/454
https://github.com/seajs/seajs/issues/1605
http://div.io/topic/430
http://div.io/topic/439
https://segmentfault.com/a/1190000000733959
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://lishaopeng.com/2016/02/05/js-module/
http://lishaopeng.com/2016/02/11/js-module2/
http://lishaopeng.com/2016/02/19/js-module3/
https://justineo.github.io/singles/writing-modular-js/
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
https://github.com/amdjs/amdjs-api/wiki/require-(%E4%B8%AD%E6%96%87%E7%89%88)
http://requirejs.org/
http://www.requirejs.cn/
http://cyj.me/why-seajs/requirejs/
http://huangxuan.me/2015/07/09/js-module-7day/
https://ecomfe.github.io/blog/dissecting-amd-preface/
https://ecomfe.github.io/blog/dissecting-amd-what/
https://ecomfe.github.io/blog/dissecting-amd-how/
https://ecomfe.github.io/blog/dissecting-amd-loader/
http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
http://www.cnblogs.com/snandy/archive/2012/05/24/2514700.html
http://www.cnblogs.com/snandy/archive/2012/06/06/2536969.html
http://www.cnblogs.com/snandy/archive/2012/06/07/2537477.html
http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html

http://div.io/topic/586
http://www.infoq.com/cn/articles/yunlong-on-fis

—-IFE2015 task4的终结线——-