CMD、AMD、CommonJS 、UMD、ES6 modules规范基础知识问答

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

使用模块化可以：
1、解决命名冲突；
2、可进行依赖管理；
3、增强代码的可读性；
4、代码解耦，提高代码的复用率；

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

1、CommonJS

CommonJS 是服务器端模块规范；Node.js的模块系统就是参照CommonJS规范实现的；CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

　var math = require('math');

然后我们可以这样调用：

　var math = require('math');
          math.add(1,2)//3

• 端：服务端
• 同异步：同步

• 实例：

  
  
  

  image.png

2、AMD

AMD（Asynchronous Module Definition）异步模块定义，它是一种采用异步的方式加载模块（即模块在加载的过程中不影响后面代码的运行）的javascript规范；它主要运用在客户端；常用的require.js就是采用了AMD规范；AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

　require([module], callback);

[module] 是一个数组，里面就是需要调用的模块名称；
callback 则是加载完成后的回调函数；

上面CommonJS的例子我们可以看出如果在客户端执行的话，可能会出现无响应的情况（因为它是同步执行的即要等待math.js加载完才能执行第二行语句），因此对于客户端（浏览器端）不能采用同步加载的机制，需要采用异步加载的机制，这也是AMD产生的背景。

例如上面CommonJS的例子就可以采用AMD规范改成下面这样：

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

在此再举个require.js的例子：

1、先写个html

2、然后在该html文件目录中的js文件夹下的lib文件夹新建如下两个js文件

//amd-main.js

 define(["inc-amd"],function(Inc){
    console.log(Inc.get());
    Inc.add1();
    console.log(Inc.get());
     Inc.add1();
    console.log(Inc.get());


 })

// inc-amd
 define(function(){
    var inc=(function(){

        var a=1;

        function add1(){
            a++;

        }
        function get(){
            return a;
        }

        return {
            add1:add1,
            get:get

        };


    }());
    return inc;
 })

运行编好的html文件后会得到如下结果：

Paste_Image.png

• 端：浏览器
• 同异步：异步

• 实例：

  
  
  

  image.png
• 相关库：require.js

3、CMD

CMD（Common Module Definition）通用模块定义，它也是javascript的一种模块规范，与依赖关系前置的AMD不同的是，CMD是按需加载的。国内玉伯编写的Sea.js里的所有javascript模块都是遵循 CMD 模块定义规范的。

• 端：浏览器
• 同异步：异步
• 实例：

image.png

• 相关库：Sea.js

4、UMD

通用模块定义
它兼容了AMD和CommonJS，同时还支持老式的“全局”变量规范

5、ES6 export/import modules

推荐资料

1、CommonJS、AMD、CMD、UMD、ES6

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *