[JavaScript] ES6模块

作者: 何幻 | 来源:发表于2016-03-07 07:13 被阅读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
        });
    

    相关文章

      网友评论

        本文标题:[JavaScript] ES6模块

        本文链接:https://www.haomeiwen.com/subject/eadnkttx.html