用require和import加载模块

用require和import加载模块

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

CommonJS加载模块就是用我们熟悉的require加载模块。它的主要原理是先运行一遍要加载的模块，将输出的对象缓存到内存里，然后通过复制的方法加载到引用它的模块中。

而在ES6的规范中，定义了一种了ES6的模块，通过import/export的方式控制模块的引用和输出。

用require加载模块

// b.js
module.exports = {
  exp1,
  exp2,
  ...
};
// a.js
let b = require('b.js');
console.log(b.exp1);
console.log(b.exp2);
...

加载模块为b.js，直接运行的模块为a.js

1. require加载模块的时候会把这个模块的代码运行一遍。

2. 如果加载的是一个基本数据类型，那么返回的是这个数据类型的浅复制

3. export这个基本类型的变量的getter就可以得到在b.js中的这个变量

4. 同样的，如果要直接赋值修改b.js中这个变量的话，就要export这个变量的setter

5. 如果加载的是一个复杂的数据类型，由于浅复制的原因，两个模块引用的对象指向同一个内存空间。如果在其中一个模块中修改了值，会影响另外一个模块。

6. 如果require命令加载同一个模块时，不会再次执行这个模块，而是取缓存中的值。COMMONJS的模块无论加载多少次，都只会运行一次。

7. 当一个模块被循环加载时，比如当a第二句引用b，b也引用了a。node a.js => 执行a.js => 遇到require b.js，开始执行b.js => 在b.js中遇到require a.js => 只执行a.js的第一句 => 继续执行b.js，直到结束 => 回到a.js的第二句，继续执行下面的语句。

module.exports和exports的区别

module.exports = {
  a: 1
};
exports.b = 1;

在Javascript里，module.exports和exports指向的是同一个对象引用，假设它叫对象1。当我们用module.exports时，我们会改变module.exports的指向，指向一个新的对象引用，假设它叫对象2。而当我们require的时候，实际上我们会返回module.exports的引用对象，即对象2。

一般来讲，这两种方式在实际运用中并无太大差别，但在循环引用中，会导致一些bug

// a.js
let b = require('./b');

module.exports = {
  a: 1
};

setTimeout(() => {
  console.log(`a.js-${b.b}`);
}, 3000);

// b.js
let a = require('./a');

module.exports = {
  b: 1
}

setTimeout(() => {
  console.log(`b.js-${a.a}`);
}, 2000);

// node a.js
// output:
// b.js-undefined
// a.js-1

考虑上文提到过的循环引用的过程。我们执行a.js，执行到require b时，我们先执行b.js中的语句。然后b的开头要require a，根据上文的规则，a.js不会执行任何语句。因此，b.js中的a指向的是一个空对象，并且exports一个拥有属性b的对象。执行完毕，我们会回到一开始的a.js，继续执行下面的语句，这时，a.js要exports一个拥有属性a的对象。然而，由于module.exports的赋值方式，实际上会让它指向一个新的对象，也就是说拥有属性a的对象，跟b.js中拿到的对象并不是同一个。因此，在setTimeout时间到了之后，b.js会输出undefined。

那要怎样避免出现这种尴尬的情况呢？很简单，只需要将a.js中的module.exports换成exports.a=1。b.js中拿到的对象引用等于a.js中的exports的引用，因此在修改exports的属性值时，也能影响到b.js。这时候，b.js就可以在setTimeout执行之前拿到一个非空的对象。

require对象用变量结构赋值

// b.js
const { a } = require('./a');
exports.b = 1;
setTimeout(() => {
  console.log(`b.js-${a.a}`);
}, 3000);
// a.js
const { b }  = require('./b');
exports.a = 2;
setTimeout(() => {
  console.log(`a.js-${b}`);
}, 2000);

// node a
// output:
// a.js-1
// b.js-undefined

根据我们之前提到过的require的机制，b.js中require拿到的对象是个空对象，而这时使用解构赋值，相当于给a赋予了undefined。由于这个a并没有拿到a.js exports中的引用，因此，这时改变exports.a无法改变b.js中a的值。最后输出undefined。

import/export加载模块

ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。

es6在遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。不同的脚本加载同一个模块得到的是同一个实例。

export规定输出接口

export let a = 0;
export function foo() {};
export class x {};
export interface y {};
...

要注意的是，export只能输出一个接口，而不能输出一个值，必须和模块内部的变量建立一一对应的关系。

// 报错
let a = 0;
export a;
// 报错
export 0;
// 正确
let b = 0;
export {b};

还有一件事，export命令不能放在块级作用域中

// 报错
function foo() {
  export default 0;
}

import引入模块

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。import语句会在编译之前就执行。也因此，我们不能用表达式和和变量来动态选择加载不同的模块。（CommonJS难得的优点是，可以使用if语句判断加载怎样的模块）

import { b } from './b';
import { c, d, e} from './b';
/// 第二句等价于连续import { c } from './b', import { d } from './b',import { e } from './b'
import { b as f } from './b'; // 使用as重命名引入的对象
// 报错
if (true) {
  import { p } from './b';
}

如果像上述代码中重复import b.js，但它只会运行一遍。

*整体加载

用*加载出所有export的对象，成为新对象的属性

// a.js
export let a = 1;
export function foo() {}

// b.js
import * as obj from './a';
// obj中有属性a和属性foo，其中一个是number另一个是function

export default

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。而用export default命令就可以为模块指定默认输出。import命令不需要加大括号。

// a.js
export default function foo() {
  console.log('foo');
}
// b.js
import foo from './a';

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

因此这种写法也是有效的

// 相当于输出default变量，这个语句将a的值给了default变量
let a = 1;
export default a;

如果想同时import default输出和其他模块输出，可以写成这样

import a, { b, c } from './a';

export和import混合使用（实际用处不大）

export { a, b } from './a';
/// 等同于
import { a, b } from './a';
export { a, b };

当使用*整体输出时

export * from './a'
// 这里的*会忽略掉a.js中的export default
// 同理，import * from './a'时也会忽略a.js中的export default

import/export输出的模块是动态绑定的常量

参考下面的代码

// b.js
import * as s from './c'
console.log(`b.js-${s.d}`);
console.log(`b.js-${s.e}`);
setTimeout(() => {
  console.log(`b.js-${s.d}`);
}, 2000)
// c.js
let c = 1;
export default c;
export let d = 2;
export let e = 3;
setTimeout(() => {
  d = 40;
}, 1000);
// output
// b.js-2
// b.js-3
// b.js-40

另外，如果修改import进来的对象

// b.js
import { d } from './c';
d = 0;
// TypeError: Assignment to constant variable.

---

以上便是js加载模块的大体方法，可能还有很多小细节本文没有提到，还需要读者自行摸索和体会。

Reference

• http://caibaojian.com/es6/module.html
• http://www.cnblogs.com/unclekeith/p/7679503.html