默认情况下,你在模块中的所有声明相对于模块而言都是寄存在本地的。如果你希望公开在模块中声明的内容,并让其它模块加以使用,你一定要_导出_这些功能。
// kittydar.js - 找到一幅图像中所有猫的位置
// (事实上是Heather Arthur写的这个库)
// (但是她没有使用ES6中新的模块特性,因为那时候是2013年)
export function detectCats(canvas, options) {
var kittydar = new Kittydar(options);
return kittydar.detectCats(canvas);
}
export class Kittydar {
... 处理图片的几种方法 ...
}
// 这个helper函数没有被export。
function resizeCanvas() {
...
}
...
你可以导出
所有的最外层函数
、类
以及var
、let
或const
声明的变量。
在一个独立文件中,我们可以导入detectCats()
函数然后用它来做点儿什么:
// demo.js - Kittydar的demo程序
import {detectCats} from "kittydar.js";
function go() {
var canvas = document.getElementById("catpix");
var cats = detectCats(canvas);
drawRectangles(canvas, cats);
}
如果想从一个模块中导入多个名称,你可以这样写:
import {detectCats, Kittydar} from "kittydar.js";
这些就是模块的基本知识了,相当简单吧。;-)
Export列表
export {detectCats, Kittydar};
// 此处不需要 `export`关键字
function detectCats(canvas, options) { ... }
class Kittydar { ... }
重命名import和export
// suburbia.js
// 这两个模块都会导出以`flip`命名的东西。
// 要同时导入两者,我们至少要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";
...
// unlicensed_nuclear_accelerator.js - 无DRM(数字版权管理)的媒体流
// (这不是一个真实存在的库,但是或许它应该被做成一个库)
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
Default exports
如果你想让自己的ES6模块有一个默认的导出,实现的方法很简单,默认导出与其它类型的导出相似,没有什么技巧可言,唯一的不同之处是它被命名为“default
”。
export default {
field1: value1,
field2: value2
};
关键字export default
后可跟随任何值:一个函数、一个类、一个对象字面量,只要你能想到的都可以。
模块对象
import * as cows from "cows";
当你import *
时,导入的其实是一个模块命名空间对象,模块将它的所有属性都导出了。所以如果“cows”模块导出一个名为moon()
的函数,然后用上面这种方法“cows”将其全部导入后,你就可以这样调用函数了:cows.moo()
。
聚合模块
// world-foods.js - 来自世界各地的好东西
// 导入"sri-lanka"并将它导出的内容的一部分重新导出
export {Tea, Cinnamon} from "sri-lanka";
// 导入"equatorial-guinea"并将它导出的内容的一部分重新导出
export {Coffee, Cocoa} from "equatorial-guinea";
// 导入"singapore"并将它导出的内容全部导出
export * from "singapore";
参考:
(1)http://www.infoq.com/cn/articles/es6-in-depth-modules?utm\_source=tuicool&utm\_medium=referral