CommonJs,AMD,CMD,ES6 Modules理解

1.CommnoJs:

同步加载模块，主要实践者nodejs，由于在服务端模块文件都存储在本地磁盘，读取快，所以常用于nodejs;受限于网络的原因不适用于浏览器端使用，浏览器端常用异步加载模块文件。

//calculate.js

function add(a){
    return a++;
}
module.exports={
    add:add
}

//index.js
var obj = require('./calculate.js');
obj.add(1);

注意：require第一次加载完该模块之后，就会在内存生成一个对象{id：‘.......’，exports:{......},loaded:true,...........},以后要用到这个模块就到exports属性上取值，即使再次执行require命令也不会再执行该模块。

 

2.CMD：

推崇依赖就近，延迟执行,主要实践者seajs；

define(function(require,exports,module){
    var a = require('./a.js');
    a.doSomething();
    var b = require('./b.js');
    b.doSomething();
});

 

3.AMD:

推崇依赖前置，提前执行，主要实践者requirejs；

//模块A依赖于模块a和b
define(['./a.js','./b.ja'],function(a,b){
    a.doSomething();
    b.doSomething();
});

 

4.ES6 Modules:

旨在成为浏览器和服务器通用的模块解决方案,主要使用import和exports两个命令；

import a from './a.js';
import b from './b.js';

a.doSomething();
b.doSomething();

function c(){
    ......
}
export default c;

注意：ES6 Modules不是对象，import命令会被静态解析，在编译时就引入代码，而不是在代码运行时加载，所以无法实现条件加载。

ES6 Modules与CommonJs的差异：

1.CommnoJS输出的是值的拷贝，而ES6模块输出的是值的引用。

2.ES6模块在编译的时候，js引擎会对脚本进行静态分析，遇到import命令就会生成一个只读引用，等到真正执行代码时候再通过这个引用去该模块里面取值，因此原始值变了import加载的值也会变。

3.CommonJs是运行时加载，CommonJs模块是一个对象，即在require该模块时会生成一个对象，然后再在该对象上取值。

4.ES6模块时编译时加载，ES6模块不是对象，而是通过exports显示输出的指定代码，