一、 模块规范

一句话总结：CommonJs用于服务端Node.js中，AMD和CMD是针对客户端的规范，为了不让引入依赖阻塞了代码进行，使用了异步加载模块。

1. CommonJs：

• 适用区域：用于服务端。
• 导入：require
• 导出：module.exports，exports。
• exports与module.exports
  exports是module.exports的引用，var exports = module.exports = {};，而最终导出的是仍然是module.exports，因此，倘若更改exports的指向，最终返回的仍然是module.exports。
• 用法：

module.exports 基础用法

/* export.js */
const a = 1
module.exports = a
/* import.js */
var a = require('./export')
// a = 1

exports 基础用法

/* export.js */
exports.a = 1 // 不能改变引用, exports = {a:1}🙅
/* import.js */
var a = require('./export')
// a = {a:1}

可以使用es6的特性 - 解构赋值

/* export.js */
exports.a = 1
/* import.js */
var {a} = require('./export')
// a = 1

• 为什么不适用于客户端？
  同步引用不适用于客户端场景

var _ = require('./loadsh')
_.map([1,2,3], square)

如上面👆所示，如果loadsh这个库由于网络原因加载得很慢的话，那么它便阻塞了后面代码的运行，这样对用户体验牺牲很大。
这时候AMD就有了诞生的需求了。

2. AMD：

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

• 使用define定义模块：

// id:模块名(可选),dependencies:依赖库(可选),factory工厂方法,返回一个模版函数
define(id?, [dependencies?], factory)
// demo
define(['Lib'], function(Lib){
  function foo(){
    Lib.doSomething();
  }
  return {
    foo : foo
  };
});

• 使用require加载模块，因为是回调执行，所以不阻塞啦。

// module:加载的模块数组, callback:加载成功后再执行的回调函数
require([module], callback);
// demo
require([loadsh], loadsh.map([1,2,3],square))

目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。

3. CMD：

CMD (Common Module Definition), 是seajs推崇的规范。它与AMD最大的区别是它推崇依赖就近。

• 同样，CMD使用define定义模块

// id:模块名(可选),dependencies:依赖库(可选),factory工厂方法,返回一个模版函数
define(id?, [dependencies?], factory)
// 不同点：它可以在工厂函数中导出导入（也是通常的做法），也是它推崇的导出导入方式
define(function(require, exports, module) {
// 模块代码
  var $ = require('jquery.js')
  $('div').addClass('active');
});

• 用use加载模块

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

• 与AMD的区别：
  最明显的区别就是在模块定义时对依赖的处理不同
  1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
  2、CMD推崇就近依赖，只有在用到某个模块的时候再去require
  这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法
  AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同。
  AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行
  CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的

二. ES6

这里主要介绍：

• ES6的import和export和export default的基本用法
• ES6和CommonJs的混用

1. 基本用法

/* export.js */
export const a = 1
/* import.js */
import { a } from './export'
// a = 1

经过babel的转换。可以看到转化为exports->require，并且给exports添加了一个__esModule的属性。

/* export.js */
"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.a = void 0;
const a = 1;
exports.a = a;
/* import.js */
"use strict";
var _export = require("./export");
console.log(_export.a);

export default

// export.js
const b = 2
export default b
// import.js
import b from './export'
console.log(b)

通过babel转化，使用exports.default进行导出。

/* export.js */
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
const b = 2;
var _default = b;
exports.default = _default;

⚠️注意：不能认为 import { b } from './export' 是用了解构赋值。当执行以下代码是不行的。import 语句中的"解构赋值"并不是解构赋值，而是 named imports。

// import.js
import { {a} } from './export' // 语法错误
console.log(a)
// export.js
export const b = { a: 1 }

named imports，语法上和解构赋值很像，但还是有所差别，比如下面的例子。

import { b as a } from './export' // 解构赋值中不能用 as

因此还是得老老实实把值接下来，然后再去处理。或者你可以和CommonJs混用来达到类似解构赋值的效果。

2. 与CommonJs混用

由于babel解析的时候也是解析成exports->require形式的，因此可以和commonJs混用。

• import.js / require - export.js / export

// import.js
var { b } = require('./export').default
console.log(b)
// export.js
export default {
  b: 2
}

• import.js / import - export.js / exports

// import.js
import { a } from './export'
console.log(a)
// export.js
module.exports = {
  a: 1
}