ES6 的模块系统
原文地址：https://hacks.mozilla.org/2015/08/es6-in-depth-modules/
ES6 是 ECMAScript 第 6 版本的简称，这是新一代的 JavaScript 的标准。ES6 in Depth 是关于 ES6 的一系列新特性的介绍。
ES6 是 ECMAScript 第 6 版本的简称，这是新一代的 JavaScript 的标准。ES6 in Depth 是关于 ES6 的一系列新特性的介绍。
遥想 2007 年，笔者开始在 Mozilla 的 JavaScript 团队工作的时候，那个时候典型的 JavaScript 程序只有一行代码。
两年之后， Google Map 被发布。但是在那之前不久，JavaScript 的主要用途还是表单验证，当然啦，你的<input onchange=>处理器平均来说只有一行。
事过情迁，JavaScript 项目已经变得十分庞大，社区也发展出了一些有助于开发可扩展程序的工具。首先你需要的便是模块系统。模块系统让你得以将你的工作分散在不同的文件和目录中，让它们之前得以互相访问，并且可以非常有效地加载它们。自然而然地，JavaScript 发展出了模块系统，事实上是多个模块系统（AMD，CommonJS，CMD，译者注）。不仅如此，社区还提供了包管理工具（NPM，译者注），让你可以安装和拷贝高度依赖其他模块的软件。也许你会觉得，带有模块特性的 ES6，来得有些晚了。
模块基础
一个 ES6 的模块是一个包含了 JS 代码的文件。ES6 里没有所谓的 module 关键字。一个模块看起来就和一个普通的脚本文件一样，除了以下两个区别：
-
ES6 的模块自动开启严格模式，即使你没有写
'use strict'。 -
你可以在模块中使用
import和export.
导出export 分为命名导入和默认导出
命名导入
让我们先来看看 export。在模块中声明的任何东西都是默认私有的，如果你想对其他模块 Public，你必须 export 那部分代码。我们有几种实现方法，最简单的方式是添加一个 export 关键字。
// kittydar.js - Find the locations of all the cats in an image.
// (Heather Arthur wrote this library for real)
// (but she didn't use modules, because it was 2013)
export function detectCats(canvas, options) {
var kittydar = new Kittydar(options);
return kittydar.detectCats(canvas);
}
export class Kittydar {
... several methods doing image processing ...
}
// This helper function isn't exported.
function resizeCanvas() {
...
}
...
通过export导出的形式，文件utility.js：
function generateRandom() {
return Math.random();
}
function sum(a, b) {
return a + b;
}
export { generateRandom, sum }
//关键词export 导出了这两个函数, 你可以看到, 这两个导出的函数是使用花括号进行包围, 并且他们使用逗号进行隔开.
你也可以使用下面的方式对导出的内容进行重命名.
export {generateRandom as random, sum as doSum}
下面我们再来看看如何在其他的模块中是哟了那个这些导出的值.
app.js
import { generateRandom, sum } from'utility';
console.log(generateRandom());//logs a random number
console.log(sum(1, 2));//3
注意第一行. 它将从utility模块中导入值. 当然, 如果你只想导出一个值(例如sum), 你可以使用下面的方式:
import { generateRandom, sum } from'utility';
同样, 你也可以将整个模块当作一个对象导入, 然后引用的时候, 使用对象属性的方法. 所以我们可以使用下面的方式:
import 'utility' as utils; console.log(utils.generateRandom());//logs a random number console.log(utils.sum(1, 2));//3
默认导出
var utils = {
generateRandom:function() {
return Math.random();
},
sum:function(a, b) {
return a + b;
}
};
export default utils;
最后一行将utils 这个变量进行导出. 而在另外一个模块中, 引用方法如下:
app.js
import utils from'utility'; console.log(utils.generateRandom());//logs a random number console.log(utils.sum(1, 2));//3 export default utils; //exports the imported value
第一行代码首先将utils对象进行导入, 你也可以同样可以将其重新导出.如最后一行
默认导出
资料来源：
ES6 的模块系统
理解ES6的Modules