一篇文章看懂AMD、CMD和CommonJS的区别

前端模块化之JS中的三种模块规范

AMD规范

• 思想
  异步加载所需模块，然后在回调函数中执行主逻辑。
• 设计目的
  1.实现JS文件的异步加载，避免网页因加载时间过长而失去响应；
  2.管理模块之间的依赖性，便于代码的编写和维护；
• 代表
  RequireJS
• 示例

//a.js
define(function(){
    console.log('a.js'执行);
    return {
        hello: function(){
            console.log('This is a.js');
        }
    }
})
//b.js
define(function(){
    console.log('b.js执行');
    return {
        hello: function(){
            console.log('hello, b.js');
        }
    }

});
//main.js
require(['a','b'],function(a,b){
    console.log('main.js执行');
    a.hello();
    $('#b').click(function(){
        b.hello();
    });
});

上面的main.js被执行的时候，会有如下输出：
a.js执行
b.js执行
main.js执行
This is a.js
在点击按钮后，会输出：
This is b.js

CMD规范

• 思想
  在RequireJS的基础上进行完善，自立门户定为CMD规范。
• 代表
  SeaJS
• 示例

//a.js
define(function(){
    console.log('a.js执行');
    return{
        hello: function(){
            console.log('This is a.js');
        }
    }
});
//b.js
define(function(){
    console.log('b.js执行');
    return {
        hello: function(){
            console.log('This is b.js');
        }
    }
});
//main.js
define(function(){
    console.log('main.js执行');
    var a = require('a');
    a.hello();
    $('#b').click(function(){
        var b = require('b');
        b.hello();
    })
});

上面的main.js执行会输出如下结果：
main.js执行
a.js执行
This is a.js
注：a.js和b.js都会预先下载，但是b.js中的代码却没有执行，因为还没有点击按钮。当点击按钮的时候，会输出如下：
b.js执行
hello, b.js

CommonJS规范

• 思想
  服务器编程
• 代表
  NodeJS
• 用途
  NodeJS是CommonJS规范的实现，webpack也是以CommonJS的形式来书写（node.js的模块系统，就是参照CommonJS规范实现的）
• 特点
  1.所有代码都运行在模块作用域，不会污染全局作用域。
  2.模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。
  3.要想让模块再次运行，必须清除缓存。
  4.模块加载的顺序，按照其在代码中出现的顺序。同步加载
• 代表方法
  全局性方法 require() - 用于加载模块
  CommonJS三大模块:
  模块标识(module)、模块定义(exports) 、模块引用(require)
  require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

异同

• AMD采用异步方式加载模块，模块的加载不影响它后面语句的运行。因而适用于浏览器；
• CMD在AMD基础上改进，可按需加载，预先下载代码，但并没有立即执行，即“就近书写，延迟执行”；
• CommonJS规范不适用于浏览器环境，适用于服务端，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间；

2018/7/2 后续补充…