AMD, CMD, CommonJS和UMD

最新推荐文章于 2022-12-15 16:01:10 发布

l_set_Sail

最新推荐文章于 2022-12-15 16:01:10 发布

阅读量301

点赞数 1

分类专栏： node.js vue 文章标签： AMD CMD CommonJS和UMD

本文链接：https://blog.csdn.net/l_set_Sail/article/details/90766961

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

node.js

3 篇文章 0 订阅

订阅专栏

AMD, CMD, CommonJS和UMD

今天由于项目中引入的echarts的文件太大，requirejs经常加载超时，不得不分开来加载echarts的各个图表。但是使用echarts自带的在线构建工具生成的支持AMD 标准的模块报错，所以不得不使用echarts的全局函数，使用requirejs的shim进行加载。借此机会学习一下AMD, CMD, CommonJS和UMD各自的规范，和它们之间的区别。

Javascript模块化
在了解这些规范之前，还是先了解一下什么是模块化。

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。

还有一些对于模块化一些专业的定义为：模块化是软件系统的属性，这个系统被分解为一组高内聚，低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。

首先，既然是模块化设计，那么作为一个模块化系统所必须的能力：

定义封装的模块。
定义新模块对其他模块的依赖。
可对其他模块的引入支持。
好了，思想有了，那么总要有点什么来建立一个模块化的规范制度吧，不然各式各样的模块加载方式只会将局搅得更为混乱。那么在JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。

CommonJS
CommonJS是服务器端模块的规范，Node.js采用了这个规范。

根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。

例如：

// foobar.js
 
//私有变量
var test = 123;
 
//公有方法
function foobar () {
 
    this.foo = function () {
        // do someing ...
    }
    this.bar = function () {
        //do someing ...
    }
}
 
//exports对象上的方法和变量是公有的
var foobar = new foobar();
exports.foobar = foobar;
//require方法默认读取js文件，所以可以省略js后缀
var test = require('./boobar').foobar;
 
test.bar();

CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

AMD和RequireJS
AMD
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义".

AMD设计出一个简洁的写模块API：
define(id?, dependencies?, factory);
第一个参数 id 为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
第二个参数，dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
第三个参数，factory，是一个需要进行实例化的函数或者一个对象。

通过参数的排列组合，这个简单的API可以从容应对各种各样的应用场景，如下所述。

定义无依赖的模块
define( {
    add : function( x, y ){
        return x + y ;
    }
} );
定义有依赖的模块
define(["alpha"], function( alpha ){
    return {
        verb : function(){
            return alpha.verb() + 1 ;
        }
    }
});
定义数据对象模块
define({
    users: [],
    members: []
});

具名模块

define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});
包装模块
define(function(require, exports, module) {
    var a = require('a'),
          b = require('b');

    exports.action = function() {};
} );

不考虑多了一层函数外，格式和Node.js是一样的：使用require获取依赖模块，使用exports导出API。

除了define外，AMD还保留一个关键字require。require 作为规范保留的全局标识符，可以实现为 module loader，也可以不实现。

模块加载
require([module], callback)

AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块，所有模块加载完成之后的回调函数。

其中：

[module]：是一个数组，里面的成员就是要加载的模块；
callback：是模块加载完成之后的回调函数。

例如：加载一个math模块，然后调用方法 math.add(2, 3);

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

RequireJS
RequireJS 是一个前端的模块化管理的工具库，遵循AMD规范，它的作者就是AMD规范的创始人 James Burke。所以说RequireJS是对AMD规范的阐述一点也不为过。

RequireJS 的基本思想为：通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来，然后返回一个新的函数（模块），我们所有的关于新模块的业务代码都在这个函数内部操作，其内部也可无限制的使用已经加载进来的以来的模块。

那么scripts下的main.js则是指定的主代码脚本文件，所有的依赖模块代码文件都将从该文件开始异步加载进入执行。

define用于定义模块，RequireJS要求每个模块均放在独立的文件之中。按照是否有依赖其他模块的情况分为独立模块和非独立模块。

独立模块，不依赖其他模块。直接定义：
define({
    method1: function(){},
    method2: function(){}
});
也等价于

define(function() {
    return {
        method1: function(){},
        method2: function(){}
    }
});

非独立模块，对其他模块有依赖。

define([ 'module1', 'module2' ], function(m1, m2) {
    ...
});

或者：

define(function(require) {
    var m1 = require('module1'),
          m2 = require('module2');
    ...
});

简单看了一下RequireJS的实现方式，其 require 实现只不过是提取 require 之后的模块名，将其放入依赖关系之中。

require方法调用模块
在require进行调用模块时，其参数与define类似。

require(['foo', 'bar'], function(foo, bar) {
    foo.func();
    bar.func();
} );

在加载 foo 与 bar 两个模块之后执行回调函数实现具体过程。

当然还可以如之前的例子中的，在define定义模块内部进行require调用模块

define(function(require) {
    var m1 = require( 'module1' ),
          m2 = require( 'module2' );
    ...
});

define 和 require 这两个定义模块，调用模块的方法合称为AMD模式，定义模块清晰，不会污染全局变量，清楚的显示依赖关系。AMD模式可以用于浏览器环境并且允许非同步加载模块，也可以按需动态加载模块。

官网 (http://www.requirejs.org/)
API (http://www.requirejs.org/docs/api.html)

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

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

CMD推崇依赖就近，AMD推崇依赖前置。

//AMD
define(['./a','./b'], function (a, b) {
 
    //依赖一开始就写好
    a.test();
    b.test();
});
 
//CMD
define(function (requie, exports, module) {
     
 

       //依赖可以就近书写
        var a = require('./a');
        a.test();
         
        ...
        //软依赖
        if (status) {
         
            var b = requie('./b');
            b.test();
        }
    });

虽然 AMD也支持CMD写法，但依赖前置是官方文档的默认模块定义写法。

AMD的API默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require，提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。
UMD
UMD是AMD和CommonJS的糅合

AMD模块以浏览器第一的原则发展，异步加载模块。
CommonJS模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。
这迫使人们又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。
在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

(function (window, factory) {
    if (typeof exports === 'object') {
     
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
     
        define(factory);
    } else {
     
        window.eventUtil = factory();
    }
})(this, function () {
    // module ...
});

模块化：模块化是指在解决某一个复杂问题时，依照一种分类的思维把问题进行系统性的分解处理，可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。

模块化系统所必须的能力：

1、定义封装的模块

2、定义新模块对其他模块的依赖

3、可对其他模块的引入支持

AMD模块规范：其实就是异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行，所有依赖某些模块的语句均放置在回调函数中。

AMD规范定义了一个全局变量define函数，格式为：define(id, dependencies, factory)

第一个参数：id为字符串类型，表示模块标识，为可选参数，如果忽略这个参数，则模块标识默认为加载器中被请求的文件的URL为模块标识。如果需要填写这个id，则最好是加载器中该模块的URL(填写id一般是为了合并多个模块减少网站中HTTP请求)。

第二个参数：dependencies是一个数组，为可选参数，里面存放着当前模块所依赖的其他模块标识.

第三个参数：factory是一个函数或者对象

案例：创建模块

define('./bsSave', ['./ajax', './lib/domApi'], function (ajax, domApi){

　　var remArr = [];

　　//模块代码

　　return remArr;

})

 

//无依赖模块可以直接使用对象字面量来定义

define({

　　add: function (x, y){return x + y;},

　　age: 25,

　　name: 'luke'

})

CMD模块规范：在CMD中，一个模块就是一个文件。全局函数define，用来定义一个模块。格式为：define(id, dependencies, factory);

第二个参数：dependencies是一个数组，为可选参数，里面存放着当前模块所依赖的其他模块标识。

第三个参数：factory可以是一个函数，也可以为对象或者字符串。当factory为对象或者字符串时，表示模块的接口就是该对象或者字符串。

案例：定义一个模块

define('./BsSave', ['./ajax'], function (require, exports, module){

　　var BsSave = {};

　　//模块代码

　　return BsSave；

})

 

//定义JSON数据模块

define({"name": "csh"})

 

//通过字符串定义模板模块

define('this is {{data}}');

 

//factory为函数的时候，表示模块的构造方法，通过return可以输出该模块的数据

define(function (){

　　var modArr = [];

　　//模块代码

　　return modArr; //输出该模块的数据

})

当模块的第三个参数是函数的时候，这个函数也有三个参数，分别是require、exports、module

require：是一个方法，接受模块标识作为唯一的参数，用来引入其他模块，require方法是同步往下执行的，需要异步加载模块可以使用require.async方法，可以使用require.resolve方法来返回模块路径

案例：加载模块

define(function(require, exports, module){

　　//同步加载模块

　　var ajax = require('./ajax');

 

　　//异步加载模块

　　require.async('./ajax', function (ajax){

　　　　ajax.get();

　　})

 

　　//返回模块的路径，但它不会加载模块

　　require.resolve('./ajax');

})

 

exports：用来向外提供模块接口，当然直接使用return也是可以的

案例：为模块向外提供接口

define(function(require, exports, module){

　　exports.name = 'csh';          //向外提供的属性

　　exports.do = function (){};     //向外提供的方法

 

　　//这样也可以向外提供接口

　　return {

　　　　name: 'csh',

　　　　do: function (){}

　　}

 

　　//这样也可以向外提供接口

　　module.exports = {

　　　　name: 'csh',

　　　　do: function (){}

　　}

 

　　//注意，以下方式是错误的

　　exports = {

　　　　name: 'csh',

　　　　do: function (){}

　　}

})

module：为一个对象，上面存储了一些与当前模块相关联的属性与方法

module.id：为模块的唯一标识。

module.uri：根据模块系统的路径解析规则得到模块的绝对路径。

module.dependencies：表示模块的依赖。

module.exports：当前模块对外提供的接口。

下面是玉伯对于 AMD 与 CMD 区别的解释(详细的区别可对照上文)：

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

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

类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出还有不少

这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。

目前这些规范的实现都能达成浏览器端模块化开发的目的。

扩展阅读：

AMD规范文档 https://github.com/amdjs/amdjs-api/wiki/AMD

RequireJS官网接口文档 http://www.requirejs.org/docs/api.html

CMD 模块定义规范 https://github.com/seajs/seajs/issues/242

SeaJS API快速参考 https://github.com/seajs/seajs/issues/266

知乎 AMD 和 CMD 的区别有哪些？ http://www.zhihu.com/question/20351507

l_set_Sail

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AMD, CMD, CommonJS和UMD

AMD, CMD, CommonJS和UMD今天由于项目中引入的echarts的文件太大，requirejs经常加载超时，不得不分开来加载echarts的各个图表。但是使用echarts自带的在线构建工具生成的支持AMD 标准的模块报错，所以不得不使用echarts的全局函数，使用requirejs的shim进行加载。借此机会学习一下AMD, CMD, CommonJS和UMD各自的规范，和它们...
复制链接

扫一扫