JavaScript模块化开发（四）——ES6模块

2016-05-10

模块基础

一个 ES6 的模块是一个包含了 JS 代码的文件。ES6 里没有所谓的 module关键字。一个模块看起来就和一个普通的脚本文件一样，除了以下两个区别：

ES6 的模块自动开启严格模式，即使你没有写 ‘use strict’。
你可以在模块中使用 import 和 export。

让我们先来看看 export。在模块中声明的任何东西都是默认私有的，如果你想对其他模块 Public，你必须 export那部分代码。我们有几种实现方法，最简单的方式是添加一个 export 关键字。

// a.js
export function detectCats(canvas, options) {
  var kittydar = new Kittydar(options);
  return kittydar.detectCats(canvas);
}
export class Kittydar {
  // code here 
}
// This helper function isn't exported.
function resizeCanvas() {
  // code here
}

你可以在 function、class、var、let 或 const 前添加 export。
在另外一个文件中，我们可以导入这个模块并且使用 detectCats() 函数：

// b.js
import {detectCats} from "a.js";
function go() {
    var canvas = document.getElementById("catpix");
    var cats = detectCats(canvas);
    drawRectangles(canvas, cats);
}

要导入多个模块中的接口，你可以这样写：

1	import {detectCats, Kittydar} from "kittydar.js";

当你运行一个包含 import 声明的模块，被引入的模块会先被导入并加载，然后根据依赖关系，每一个模块的内容会使用深度优先的原则进行遍历。跳过已经执行过的模块，以此避免依赖循环。

导出表

如果你觉得在每个要导出的部分前都写上 export很麻烦，你可以只写一行你想要导出的变量列表，再用花括号包起来。

export {detectCats, Kittydar};
// no `export` keyword required here
function detectCats(canvas, options) { ... }
class Kittydar { ... }

导出表不一定要出现在文件的第一行，它可以出现在模块顶级作用域中的任何一行。你可以写多个导出表，也可以在列表中再写上其他export声明，只要没有变量名被重复导出即可。

重名命导出和导入

如果导入的变量名恰好和你模块中的变量名冲突了，ES6 允许你给你导入的东西重命名：

1 2	import {flip as flipOmelet} from "eggs.js"; import {flip as flipHouse} from "real-estate.js";

类似地，你在导出变量的时候也能重命名。这个特性在你想将同一个变量名导出两次的场景下十分方便，举个例子：

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

默认导出

新一代的标准的设计理念是兼容现有的 CommonJS 和 AMD 模块。所以如果你有一个 Node 项目，并且刚刚执行完 npm install lodash，你的 ES6 代码可以独立引入 Lodash 中的函数：

1
2
3

import {each, map} from "lodash";
each([3, 2, 1], x => console.log(x));

如果你想写自己的默认导出，那也很简单：

let myObject = {
  field1: value1,
  field2: value2
};
export {myObject as default};
// or
export default {
  field1: value1,
  field2: value2
};

export default 关键字后可以跟随任何值：函数，对象，对象字面量，任何你能说得出的东西。\

模块对象

当你 import *，被引入进来的是一个 module namespace object。

1	import * as cows from "cows";

它的属性是那个模块的导出，所以如果 “cows” 模块导出了一个名为 moo() 的函数，当你像这样引入了 “cows” 之后，你可以这样写 cows.moo()。

聚合模块

有时候一个包的主模块会引入许多其他模块，然后再将它们以一个统一的方式导出。为了简化这样的代码，我们有一个 import-and-export 的简写方法：

// import "sri-lanka" and re-export some of its exports
export {Tea, Cinnamon} from "sri-lanka";
// import "equatorial-guinea" and re-export some of its exports
export {Coffee, Cocoa} from "equatorial-guinea";
// import "singapore" and export ALL of its exports
export * from "singapore";