[JavaScript] ES6模块

2019年5月23日 137次阅读

（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=>{

    });

注：
System.import只能读取单个模块，可以使用Promise.all导入多个模块。

Promise.all(['module1', 'module2', 'module3'].map(x=>System.import(x)))
    .then(([module1, module2, module3])=>{
        //use module1, module2, module3
    });
点赞