ES6模块之export和import详解
来源:互联网 发布:软件供应商对比表 编辑:程序博客网 时间:2024/06/10 06:43
ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。
1、模块导出(export)
你可以
导出
所有的最外层函数
、类
以及var
、let
或const
声明的变量。ES6模块只支持静态导入和导出,你只可以在模块的最外层作用域使用
import
和export
,不可在条件语句中使用,也不能在函数作用域中使用import
。所有导出的标识符一定要在源代码中明确地导出它们的名称,你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。如下导出是错误的。function squre() {};if(true) {export {squre};}
1、名字导出(name export)
名字导出可以在模块中导出多个声明。
//------ lib.js ------export const sqrt = Math.sqrt;export function square(x) {return x * x;}export function add (x, y) {return x + y;}//------ main.js ------import { square, add } from 'lib';console.log(square(10)); //100console.log(add(2,4)); //6这样导入的变量名必须和导出的名称一致。以上对于每一个要导出的变量都加了export,我们也可以直接导出一个列表,例如上面的lib.js可以改写成:
//------ lib.js ------const sqrt = Math.sqrt;function square(x) {return x * x;}function add (x, y) {return x + y;}export {sqrt, square, add}
export
列表可以在模块文件最外层作用域的每一处声明,不一定非要把它放在模块文件的末尾。也可以直接导入整个模块,此时的main.js模块将变成这样。
//------ main.js ------import * as lib from 'lib';console.log(lib.square(10)); //100console.log(lib.add(2,4)); //6
2、默认导出(default export)
一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致,这对于导出匿名函数或类非常有用。//------ myFunc.js ------export default function() {...};//------ main.js ------import myFunc from 'myFunc';myFunc();注意这里默认导出不需要用{}。
当然也可以使用混合的导出。
//------ lib.js ------export default function() {...};export function each() {...};//------ main.js ------import _,{ each } from 'lib';
2、重命名export和import
为了解决导出命名冲突的问题,ES6为你提供了重命名的方法解决这个问题,当你在导入名称时可以这样做:
// 这两个模块都会导出以`flip`命名的东西。// 要同时导入两者,我们至少要将其中一个的名称改掉。import {flip as flipOmelet} from "eggs.js";import {flip as flipHouse} from "real-estate.js";同样,当你在导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值,这样的情况偶尔也会遇到:
function v1() { ... }function v2() { ... }export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion};对于默认导出,只是导出了一个特殊的名字叫 default,你也可以就直接用他的名字,把它当做命名导出来用,下面两种写法是等价的:
import { default as foo } from 'lib';import foo from 'lib';也可以把名称as为default来默认导出:
//------ module1.js ------export default 123;//------ module2.js ------const D = 123;export { D as default };
3、作为中转模块导出
有时候为了避免上层模块导入太多的模块,我们可能使用底层模块作为中转,直接导出另一个模块的内容如下:
//------ myFunc.js ------export default function() {...};//------ lib.js ------export * from 'myFunc';export function each() {...};//------ main.js ------import myFunc,{ each } from 'lib';
这样main.js只需导入lib模块即可,虽然myFunc模块从lib模块导出,但是lib却不能使用myFunc模块的内容。
参考链接:
http://www.infoq.com/cn/articles/es6-in-depth-modules
http://2ality.com/2014/09/es6-modules-final.html
http://blog.csdn.net/lihongxun945/article/details/49031383
http://blog.csdn.net/lihongxun945/article/details/49031383
阅读全文
0 0
- ES6模块之export和import详解
- ES6 模块化(Module)export和import详解
- Es6 中 export和import详解
- 关于ES6的 模块功能 Module 中export import的用法和注意之处
- ES6模块的import和export用法总结
- ES6模块的import和export用法总结
- ES6模块的import和export用法总结
- export 与 export default import 详解| es6
- ES6中的export、import、export default详解
- ES6中的import和export
- ES6 module export和import
- ES6基础--import和export
- ES6 import/export:模块导入导出方式
- es6 多个模块export import
- RequireJS-CommonJS-AMD-ES6 Import/Export详解
- 详解JavaScript ES6中export import与export default的用法和区别
- es6 import 和 export细节说明
- ECMAScript 2015(ES6):import和export命令
- Laravel 自定义验证过程
- linux中帐号的管理
- USACO-Section2.2 Preface Numbering [其他]
- 4.Object有哪些公用方法?
- C语言(预处理)
- ES6模块之export和import详解
- 文章标题
- java 排序
- JVM Old Generation的Full GC日志字段不详解
- 使用 vue2 制作一个知乎日报
- arcpy问题记录—访问空间数据
- 第一次留言
- 刷题——ReorderList
- MOC--元对象编译器