CMD、AMD、CommonJS-规范

概念

1、为什么要使用模块化？

• 当代码规模较大或进行团队协作时，如果不实行模块化，有可能导致命名冲突----解决命名冲突；
• 不使用模块化的依赖调用比较容易陷入混乱，使用模块化有助于依赖的管理----对依赖进行管理；
• 模块化的代码更利于他人阅读和协同开发维护----提高代码可读性；
• 方便代码的复用----代码解耦，提高复用性；

2、CMD、AMD、CommonJS 规范分别指什么？有哪些应用

2.1、CMD(Common Module Definition)通用模块定义规范

• 是浏览器端的模块化规范，是在SeaJS的推广过程中产生的，该规范明确了模块的基本书写格式和基本交互规则，提倡按需加载。

• 在CMD规范中，一个模块就是一个文件，代码格式：

define(id?, deps?, factory)

因为CMD推崇：
1、一个文件一个模块，所以经常就用文件名作为模块id；
2、CMD推崇依赖就近，所以一般不在define的参数中写依赖；

• define是一个全局函数，用来定义模块；
• factory参数可以是一个函数，也可以是一个对象或字符串。
  • 当 factory为对象、字符串时，表示模块的接口就是该对象、字符串。
  • 当factory为函数时表示是模块的构造方法。执行该构造方法可以得到模块向外提供的接口。factory方法在执行时，默认会传入三个参数：require（把其他模块导入）、exports（把模块内的一些属性和方法导出） 和 module。

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块；
CMD推崇就近依赖，只有在用到某个模块的时候再去require；

//CMD
define(function(require, exports, module){ 
    var a = require('a'); 
    a.doSomething(); 
    var b = require('b'); 
    b.doSomething();   // 依赖就近，延迟执行
});

//AMD
define(['a', 'b'], function(a, b){   // 依赖前置，提前执行 
    a.doSomething(); 
    b.doSomething();
});

明显看出和 AMD 不同，模块定义时已不用立马引入依赖，而是运行到需要时候再加载，根据顺序执行，这样更像是 CommonJS 的风格，让人感觉也像是同步加载似的。但实际上 CMD 内部处理是对文件做了一个词法的解析，在还没执行的时候，解析出所需的依赖，并不是真正的同步。

• CMD规范的主要应用是SeaJS，现在已经被废弃。

2.2、AMD(Asynchronous Module Definition)异步模块定义规范

• 它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

• 由于不是JS原生支持，使用AMD规范进行页面开发需要用到对应的函数库，也就是大名鼎鼎的RequireJS，实际上AMD是RequireJS在推广过程中对模块定义的规范化的产出。

• RequireJS主要解决两个问题
  1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器；
  2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长；

• 例子：
  定义模块 myModule.js

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

加载模块

require(['myModule'], function (my){
    my.printName(); 
});

• 语法

1、RequireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

• id：可选参数，用来定义模块的标识，如果没有提供该参数，默认就是脚本文件名（去掉拓展名）；
• dependencies：是一个当前模块依赖的模块名称数组；
• factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值；

2、在页面上采用require函数加载模块

require([module], callback);

• 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
• 第二个参数callback，则是加载成功之后的回调函数。

加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块；
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

require(['math'], function(math){
    math.add(2, 3);
});

math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

• 实现AMD 规范的库有：require.js、curl.js和 Dojo.js等。

3.3、CommonJS通用模块定义规范

CommonJS 由首先使用 js模块化概念的 Node.js采用，是服务器端模块的规范。
1、定义模块
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

2、模块输出
模块只有一个出口，module.exports对象我们需要把模块希望输出的内容放入该对象。

3、加载模块
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。

例子：
模块定义 myModel.js

//模块定义 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {  //模块输出
    printName: printName,
    printFullName: printFullName
}

加载模块

var nameModule = require('./myModel.js');
nameModule .printName();

不同的实现对require时的路径有不同要求，一般情况可以省略js拓展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）。