[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
    });

相关文章

  • 模块(一) CommonJs,AMD, CMD, UMD

    系列文章导航 模块(二) es6 module typescript module 本文参考Javascript模...

  • ES6模块

    JavaScript没有统一模块化标准规范,所以ES6以前JavaScript程序都比较随意,没有模块化的程序大规...

  • Rollup.js 之一:介绍

    来源:rollup.js 官网 Rollup 是一个 JavaScript 模块打包器。它使用 ES6 模块语法。...

  • node 环境下一个文件如何同时支持 import 和 requ

    JavaScript 现在有两种模块。一种是 ES6 模块,简称 ESM;另一种是 CommonJS 模块,简称 ...

  • 模块化

    history JavaScript 一直没有模块(module)体系 在 ES6 之前,模块加载方案最主要有 C...

  • import export 理解

    ES6 关于export和import理解 1. ES6之前JavaScript没有模块体系,相关社区提供了一些加...

  • Es6 模块 export、export default 、im

    说到模块这里我们要说下javascript严格模式。 ES6的模块自动采用严格模式,不管你有没有在模块头部加上"u...

  • 面试涉及的知识点

    csshtml重点:javascript(闭包,作用域,高级特性) 重点:es6 async ,作用域,模块化...

  • CommonJS 笔记

    CommonJS 规范是什么? 在 ES6 之前 JavaScript 是没有模块的概念的,而 Python 有 ...

  • JavaScript ES6中export及export def

    在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,...

网友评论

    本文标题:[JavaScript] ES6模块

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