[JavaScript] ES6模块
2016-03-07 本文已影响414人
何幻
(1)命名式导出
//lib.js
export constsqrt=Math.sqrt;
export function square(x){
return x*x;
};
export function diag(x,y){
return sqrt(square(x)+square(y));
};
//相当于
//export {constsqrt, square, diag};
//main.js
import {square, diag} from 'lib'; //只导入square和diag
console.log(square(11)); //121
console.log(diag(3, 4)); //5
(2)导入整个模块
//main.js
import * as lib from 'lib';
console.log(lib.square(11)); //121
console.log(lib.diag(3, 4)); //5
注:
方括号语法也是可以的,lib['square'](11)
。
(3)默认导出
导出函数:
//myFunc.js
export default function(){};
//main.js
import abc from 'myFunc'; //导入"默认导出"不用加花括号{abc}
导出类:
//MyClass.js
export default class {};
//main.js
import ABC from 'MyClass'; //导入"默认导出"不用加花括号{ABC}
注:
默认导出一般是没有名字的,默认导出的操作数应该是表达式。
(4)同时进行命名导出和默认导出
//underscore.js
export default function(obj){};
export function each(obj,iterator,context){};
export { each as forEach };
//main.js
import _, { forEach } from 'underscore'; //花括号外接收的是"默认导出",花括号内的是"命名导出"
注:
默认导出不过是一种命名为default
的导出方式。
export default 123;
<=>
const D = 123;
export { D as default };
import foo from 'lib';
<=>
import { default as foo } from 'lib';
(5)总结,导入方式
对于默认导出和命名导出
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';
更名
import { named1 as myNamed1, named2 } from 'src/mylib';
导入整个模块
import * as mylib from 'src/mylib';
只载入模块,不导入任何东西
import 'src/mylib';
(6)总结,导出方式
命名导出
export var myVar1=...;
export let myVar2=...;
export const MY_CONST=...;
export function myFunc(){};
export function* myGeneratorFunc(){};
export class MyClass(){};
默认导出
export default 123;
export default function(){};
export default x=>x;
export default class{};
模块末尾导出
const MY_CONST=...;
function myFunc(){}
export { MY_CONST, myFunc };
更名
export { MY_CONST as THE_CONST, myFunc as theFunc };
导出引用
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';
(7)动态导入
System.import('some_module')
.then(some_module=>{
//use the module
})
.catch(error=>{
});
注:
<u></u>System.import
只能读取单个模块,可以使用Promise.all
导入多个模块。
Promise.all(['module1', 'module2', 'module3'].map(x=>System.import(x)))
.then(([module1, module2, module3])=>{
//use module1, module2, module3
});