在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
Modules（模块）
每一个ES6模块都是一个包含JS代码的文件，模块本质上就是一段脚本，而不是用 module 关键字定义一个模块。默认情况下模块都是在严格模式下运行。模块功能主要由两个命令构成：export和import。export命令用于用户自定义模块，规定对外接口；import命令用于输入其他模块提供的功能，同时创造命名空间（namespace），防止函数名冲突。
export
export用于从给定文件（或模块）导出函数和对象。
-
-
export { name1, name2, …, nameN };
-
export { variable1 as name1, variable2 as name2, …, nameN };
-
export let name1, name2, …, nameN; // also var
-
export let name1 = …, name2 = …, …, nameN; // also var, const
-
export default expression;
-
export default function (…) { … } // also class, function*
-
export default function name1(…) { … } // also class, function*
-
export { name1 as default, … };
-
export * from …;
-
export { name1, name2, …, nameN } from …;
-
export { import1 as name1, import2 as name2, …, nameN } from …;
-
单个导出
-
-
// export.js
-
export let firstName = 'Michael';
-
export let lastName = 'Jackson';
-
export let year = 1958;
-
function add(x, y) {
-
return x + y;
-
}
-
export { add };
-
export function multiply(x, y) {
-
return x * y;
-
};
-
-
批量导出
-
-
// export.js
-
let firstName = 'Michael';
-
let lastName = 'Jackson';
-
let year = 1958;
-
function multiply(x, y) {
-
return x * y;
-
}
-
export {firstName, lastName, year, multiply};
-
重命名导出
-
-
let n = 1;
-
function f()) {
-
}
-
export { n as m, f as g};
-
默认导出，每个模块只能有一个默认导出：
-
-
// exportDefault.js
-
function f() {
-
}
-
export default f;
-
export{ f as default };
-
import
import用于从外部模块、其他脚本中导入函数、对象或者原型，这些被导入的模型必须在其他的模块或者脚本中被导出的。
-
-
import defaultMember from "module-name";
-
import * as name from "module-name";
-
import { member } from "module-name";
-
import { member as alias } from "module-name";
-
import { member1 , member2 } from "module-name";
-
import { member1 , member2 as alias2 , [...] } from "module-name";
-
import defaultMember, { member [ , [...] ] } from "module-name";
-
import defaultMember, * as name from "module-name";
-
import "module-name";
-
无对象导入，如果模块包含一些逻辑要执行，且不会导出任何对象，此类对象也可以被导入到另一模块中。
导入默认对象，采用Default导出方式导出对象，该对象在import声明中将直接被分配给某个引用。
-
-
import d from './exportDefault';
-
批量导入
-
-
import {firstName, lastName, year, multiply} from './export';
-
重命名导入
-
-
import { lastName as surname } from './export';
-
导入所有对象
-
-
import * as o from './export';
-
import命令导入的对象可能是一个变量，也可能是一个函数，或者一个类，要视具体情况而定。import与require的差异较大，好不要混用。
实例
f10_modules_math.js
-
-
export function sum(...x) {
-
return x.reduce((m, n) => m + n);
-
}
-
export var pi = 3.141593;
-
f10_modules_app.js
-
-
import * as math from "f10_modules_math";
-
function execute() {
-
console.log("π = " + math.sum(math.pi));
-
console.log("2π = " + math.sum(math.pi, math.pi));
-
console.log("3π = " + math.sum(math.pi, math.pi, math.pi));
-
console.log("4π = " + math.sum(math.pi, math.pi, math.pi, math.pi));
-
}
-
export { execute };
-
-
f10_modules.js
-
-
import * as app from "f10_modules_app";
-
function f10_modules() {
-
console.log("\nf10:Modules");
-
-
app.execute(); // 输出：π = 3.141593 2π = 6.283186 3π = 9.424779 4π = 12.566372
-
}
-
完整代码：
 |
ES6.zip |
|
