AMD与CMD，CommonJs,ES6的区别

宁静的夏天
216 阅读4分钟

AMD

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。

AMD是RequireJS在推广过程中对模块定义的规范化产出，它是一个概念，RequireJS是对这个概念的实现，就好比JavaScript语言是对ECMAScript规范的实现 所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

RequireJS：是一个AMD框架，可以异步加载JS文件，按照模块加载方法，通过define()函数定义，第一个参数是一个数组，里面定义一些需要依赖的包，第二个参数是一个回调函数，通过变量来引用模块里面的方法，最后通过return来输出。

是一个依赖前置、异步定义的AMD框架（在参数里面引入js文件），在定义的同时如果需要用到别的模块，在最前面定义好即在参数数组里面进行引入，在回调里面加载

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数： require([module], callback); 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

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

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

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

CMD

CMD---通用模块定义（CMD）是Common Module Definition的缩写，是SeaJS 在推广过程中对模块定义的规范化产出。是SeaJS在推广过程中对模块定义的规范化产出，是一个同步模块定义，是SeaJS的一个标准，SeaJS是CMD概念的一个实现，SeaJS是淘宝团队提供的一个模块开发的js框架. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：

//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() ... 
})

虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。

AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

CommonJS

CommonJs是通过module.exports定义的，在前端浏览器里面并不支持module.exports,通过node.js后端使用的。Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的 node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

var math = require('math'); 
//然后，就可以调用模块提供的方法：
var math = require('math'); 
math.add(2,3); // 5  
//因为这个系列主要针对浏览器编程，不涉及node.js，
//所以对CommonJS就不多做介绍了。我们在这里只要知道，require()用于加载模块就行了

CommonJs输出方式有2种：默认输出---module export 和带有名字的输出---exports.area

//通过exports导出
exports.objA={
    a:'a'
    }
};
exports.objB={
    b:'b'
}
//or 通过module.exports导出
var objA={
    a:'a'
};
var objB={
    b:'b'
};
module.exports={
    objA:objA,
    objB:objB
}

ES6

模块化---export/import对模块进行导出导入的

//index.js文件 通过export导出
export function getValue(key){
        ...
        return obj[key]
    }
}
//通过import 导入
import {getValue} from './index.js';
avatar
文章
阅读
粉丝