Js模块化 about bindy.github.com

[bindy]

什么是模块化

理解模块化，最简单的方式就是拿乐高来对比，它有这几个特性

1. 模块与模块之间是相互独立的
2. 模块之间可以做加法
3. 模块是完整的，不会少了一个螺丝钉
4. 模块是可以有子模块的，同样也是可以有父模块的

为什么要使用模块化呢

可以更好的分工，职责分明，理清脉络，还可以贡献分享一些模块帮助其他人完成任务

[bindy]

如何实现模块化

目前市面上实现模块的方式大致有两类

• CommonJs （服务端）
• CMD/AMD （客户端）

CommonJs的规范，主要是Node、NPM在执行，同时也得益于模块化，使得Node、Npm的发展非常迅猛，他们的写法大概是这样的

function moduleA(){
 /* */
};
module.exports = moduleA;

var A = require(./moduleA);
A.funA();

CommonJs规范约定，每个模块内部，module代表当前模块，它的exports属性是对外的接口。
CommonJs遵循的是同步加载模块规范，也就是会自上而下依次进行，而且由于服务器环境对模块的加载等同于硬盘的读写速度，是非常非常快的。

CMD/AMD的规范则是非同步加载模块，允许有回调函数，一般用在浏览器端这种加载环境多变的情况
以SeaJs为例

define(function(require,exports,module){
    require.async('./module/a', function(){alert(1)}
    require.async('./module/b', function(){alert(2)}
  });

由于网络环境，加载模块的顺序是不固定的，哪个模块先加载完优先执行

对于CMD与AMD的区别，有这几点

1. AMD 提前执行依赖 - 尽早执行，requireJS 是它的实现
2. CMD 按需执行依赖 - 懒执行，seaJS 是它的实现

参考文章：
http://javascript.ruanyifeng.com/nodejs/module.html
http://anjia.github.io/2015/06/23/js_module_2_AMD%E5%92%8CCMD/

[bindy]

简要梳理一下seajs内部实现的过程

1.从use函数开始，根据id，预定义的config去获取js/css的绝对路径
2.获得文件的路径之后，接下来初始化缓存对象，用来缓存每个模块的信息
3.开始从网络加载相关资源，资源ready之后，存储在缓存对象，以供使用
4.等待资源加载完毕，开始进入代码中的define部分
5.define事件执行之后，onload事件将触发，执行回调事件，开始修改模块中的调用信息
6.若检测到有其他依赖，则重复以上3，4，5
7.当所有的模块加载完毕后，开始执行use函数的主回调事件，完毕

SeaJS是异步加载模块, 执行模块的顺序也是严格按照模块在代码中出现(require)的顺序。