commonJS、AMD与CMD区别表格对比

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/momDIY/article/details/82223856

一、对比总览

名称	同步异步	规范文件	应用场景	加载速度	描述
CommonJS	同步	CommonJS	nodejs	平均加载速度最慢	最早版本的js模块化编程规范，同步下载所有依赖后才能继续向下执行。
AMD	异步	requireJS	依赖前置	平均加载速度最快	CommonJS的异步js加载模块解决方案，头部加载所有所需依赖。
CMD	异步	seaJS	就近加载	加载速度适中	CommonJS的异步js加载模块解决方案，使用依赖前就近加载所需依赖。

二、解决问题：

以上三种规范都是在解决以下问题：

• 模块化分装，避免污染全局变量
• 隐藏实现细节，避免从模块外部修改我们没有暴露出来的变量、函数

三、commonJS

• 一个单独的文件就是一个模块
• 模块出口唯一 module.exports
• 加载模块使用require（.js的扩展名可省略）

加载方式

require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。

在js文件加载中，同步加载会使得页面加载效率很低，于是有了后来的CMD与AMD规范。

四、AMD(Asynchronous Module Definition)

意为异步模块定义。对应函数库为大名鼎鼎的RequireJS

语法

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

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

• define(id, dependencies, factory);
  
  • id 用来定义模块的标识。可选
  • dependencies 当前模块依赖的模块名称。数组
  • factory 模块初始化时执行的函数或对象
• require([dependencies], function(){});
  
  • 引用的模块。数组
  • 当加载的函数都加载成功后执行的回调函数。

五、CMD(Common Module Definition)

同为异步模块，只是在模块定义方式和模块加载时机略有不同。

推崇理念

• 一个文件一个模块，经常用文件名作为模块Id
• 推崇依赖就近，一般不在define的参数中写依赖，在factory中写

demo

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

六、AMD与CMD区别

注：加载模块都是异步的。

在模块定义时对依赖的处理不同

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

对依赖模块的执行时机处理不同

• 不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载
• CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块

依赖前置

在解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块

就近依赖

可以把依赖写进你的代码中的任意一行

等你看明白了所有概念再去看文章开头的对比表格，一定会觉得豁然开朗。

END