ECMAScript6(19)：Module 模块

import {a, b, c} form ‘./abc’;

export {a, b, c}

// 使用简写, 可读性不好，不建议

export {a, b, c} from ‘./abc’;

//ES7 提议，在简化先输入后输出的写法。现在不能使用，也不建议使用，可读性不好

export a, b, c from ‘./abc’

使用 import 和 export 需要注意一下几个方面：

• export 必须写在所在模块作用于的顶层。如果写在了内部作用于会报错

• export 输出的值是动态绑定的，绑定在其所在的模块。

// foo.js

export var foo = ‘foo’;

setTimeout(function() {

foo = ‘foo2’;

}, 500);

// main.js

import * as m from ‘./foo’;

console.log(m.foo); // foo

setTimeout(() => console.log(m.foo), 500); //foo2 500ms 后同样会被修改

• import 具有声明提升，而且会提升到整个文件最上面

• import 获得的变量都是只读的，修改它们会报错

• 在 export 输出内容时，如果同时输出多个变量，需要使用大括号{}，同时 import 导入多个变量也需要大括号

• import 引入模块的默认后缀是 .js, 所以写的时候可以忽略 js 文件扩展名

• import 会执行要所加载的模块。如下写法仅仅执行一个模块，不引入任何值

import ‘./foo’; //执行 foo.js 但不引入任何值

模块整体加载

当然模块可以作为整体加载，使用*关键字，并利用 as 重命名得到一个对象，所有获得的 export 的函数、值和类都是该对象的方法：

// abc.js

export var a = 1;

export var b = 2;

export var c = 3;

// main.js

import * as abc from ‘./abc’;

console.log(abc.a, abc.b, abc.c);

上面 main.js 中的整体加载可以用 module 关键字实现：

//暂时无法实现

module abc from ‘./abc’;

console.log(abc.a, abc.b, abc.c); //1 2 3

注意，以上2种方式获得的接口，不包括 export default 定义的默认接口。

export default

为了使模块的用户可以不看文档，或者少看文档，输出模块的时候利用 export default 指定默认输出的接口。使用 export defalut 输出时，不需要大括号，而 import 输入变量时，也不需要大括号(没有大括号即表示获得默认输出)

// abc.js

var a = 1, b = 2, c = 3;

export {a, b};

export default c; //等价于 export default 3;

// main.js

import {a, b} from ‘./abc’;

import num from ‘./abc’; // 不需要大括号, 而且可以直接改名(如果必须用原名不还得看手册么?)

console.log(a, b, num) // 1 2 3

本质上，export default输出的是一个叫做default的变量或方法，输入这个default变量时不需要大括号。

// abc.js

var a = 20;

export {a as default};

// main.js

import a from ‘./abc’; // 这样也是可以的

console.log(a); // 20

// 这样也是可以的

import {default as aa} from ‘./abc’;

console.log(aa); // 20

如果需要同时输入默认方法和其他变量可以这样写 import:

import customNameAsDefaultExport, {otherMethod}, from ‘./export-default’;

这里需要注意：一个模块只能有一个默认输出，所以 export default 只能用一次

模块的继承

所谓模块的继承，就是一个模块 B 输出了模块 A 全部的接口，就仿佛是 B 继承了 A。利用 export * 实现：

// circleplus.js

export * from ‘circle’; //当然，这里也可以选择只继承其部分接口，甚至可以对接口改名

export var e = 2.71828182846;

export default function(x){ //重新定义了默认输出，如果不想重新定义可以：export customNameAsDefaultExport from ‘circle’;

return Math.exp(x);

}

//main.js

import * from ‘circleplus’; //加载全部接口

import exp from ‘circleplus’; //加载默认接口

//…use module here

上面这个例子 circleplus 继承了 circle。值得一提的是，export * 不会再次输出 circle 中的默认输出(export default)。

在使用和定义模块时，希望可以做到以下几个建议：

• Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用 import 取代 require, 使用 export 取代module.exports

• 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default

• 尽量不要 export default 与普通的 export 同时使用

• 不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出(export default)

• 如果模块默认输出一个函数，函数名的首字母应该小写；如果模块默认输出一个对象，对象名的首字母应该大写

ES6 模块加载的实质

ES6 模块加载的机制是值的应用，而 CommonJS 是值的拷贝。这意味着， ES6 模块内的值的变换会影响模块外对应的值，而 CommonJS 不会。 ES6 遇到 import 时不会立刻执行这个模块，只生成一个动态引用，需要用的时候再去里面找值。有点像 Unix 中的符号链接。所以说 ES6的模块是动态引用，不会缓存值。之前的这个例子就可以说明问题：

// foo.js

export let counter = 3;

export function inc(){

counter++;

}

// main.js

import {counter, inc} from ‘./foo’;

console.log(counter); //3

inc();

console.log(counter); //4

我们看一个 CommonJS 的情况

// foo.js

let counter = 3;

function inc(){

counter++;

}

module.exports = {

counter: counter,

inc: inc

}

// main.js

let foo = require(‘./foo’)

let counter = foo.counter;

let inc = foo.inc;

console.log(counter); //3

inc();

console.log(counter); //3

循环加载

不知道你们只不知道循环引用，在 js 垃圾回收机制中提到过：如果 A 对象的一个属性值是 B 对象，而 B 对象的一个属性值是 A 对象，就会形成循环引用，无法释放他们的内存。而模块中也会出现循环加载的情况：如果 A 模块的执行依赖 B 模块，而 B 模块的执行依赖 A 模块，就形成了一个循环加载，结果程序不能工作，或者死机。然而，这样的关系很难避免，因为开发者众多，谁都会在开发自己的模块时使用别人的几个模块，久而久之，就行互联网一样，这样的依赖也织成了一个网。

ES6 和 CommonJS 处理循环加载又不一样，从 CommonJS 开始研究

• CommonJS

CommonJS 每次执行完一个模块对应的 js 文件后在内存中就生成一个对象：

{

id: ‘…’, //表示属性的模块名

exports: {…}; //模块输出的各个接口

loaded: true, //表示是否加载完毕

//…内容很多，不一一列举了

}

之后使用这个模块，即使在写一遍 requrie，都不会再执行对应 js 文件了，会直接在这个对象中取值。

CommonJS 如果遇到循环加载，就输出已执行的部分，之后的不再执行，执行顺序以注释序号为准(从0开始)：

// a.js

exports.done = false; //1. 先输出 done

var b = require(‘./b.js’); //2. 进入 b.js 执行 b.js //5. 发现 a.js 没执行完，那就重复不执行 a.js，返回已经执行的 exports

console.log(In a.js, b.done = ${b.done}); //10. 第2步的 b.js 执行完了，继续执行 a.js 得到控制台输出：‘In a.js, b.done = true’

exports.done = true; //11

console.log(‘a.js executed’); //12. 得到控制台输出：“a.js executed”

// b.js

exports.done = false; //3. 先输出 done

var a = require(‘./a.js’); //4. 执行到这里发生循环加载，去 a.js 执行 a.js //6. 只得到了 a.js 中的 done 为 false

console.log(In b.js, a.done = ${a.done}); //7. 得到控制台输出：“In b.js, a.done = false”

exports.done = true; //8. 输出 done, 覆盖了第3步的输出

console.log(‘b.js executed’); //9. 得到控制台输出：“b.js executed”

//main.js

var a = require(“./a.js”); //0. 去 a.js 执行 a.js

var b = require(“./b.js”); //13. b.js 已经执行过了，直接去内存中的对象取值

最后

==
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。