前端模块化开发

模块化（Modular）

• 概念：

  模块化是一种项目的构架模式， 这种构架模式让JS代码重用性变得非常高，让项目构架的一些复杂问题全部得以解决。

• 使用：

  例如，多个script标签不会再出现了，我们只要用一个script标签进行引入就可以了。

• 模块使用的一般步骤：

  定义模块 → 接口暴露 → 引入模块 → 调用模块

• 模块化的（书写）规范：CMD 与 AMD规范的比较

模块化规范	commonJS	CMD	AMD
全称	commonJS	Asynchronous Module Definition	Common Module Definition
中译名		异步模块定义	通用模块定义
联系	Modues/1.x规范	Modues/2.0规范
模块加载器	node.js后台采用	sea.js	require.js
执行机制		先定义所有依赖，然后在加载完成后的回调函数中执行
语法		require([module], callback);
相同点		异步加载模块	异步加载模块
不同点	对依赖执行时机的处理	需求执行，按需加载	提前执行，预先加载
	加载依赖的方式	依赖就近：	依赖前置
		需要把模块变为字符串解析遍历，才能确定所依赖的模块	js可以方便知道依赖模块是谁，立即加载；
特点		牺牲性能，因为遍历，但整个执行消耗曲线比较平缓	前期消耗网络资源大， 但是后期运行效率高.

1. 不过requirejs 2.0里面，也可以按需加载了，直接使用cmd 的语法形式。

• 示例代码：

// CMD                                                     
define(function(require, exports, module) {                
    var a = require('./a')                                 
    a.doSomething()                                        
    // 此处略去 100 行                                          
    var b = require('./b')             // 依赖可以就近书写              
    b.doSomething()                                        
    // ...
});

// AMD
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
     a.doSomething()
     // 此处略去 100 行
     b.doSomething()
    ...
});