Es6 中 export和import详解
来源:互联网 发布:最优化方法陈宝林pdf 编辑:程序博客网 时间:2024/05/31 18:38
模块功能主要由两个命令构成:export
和import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export
关键字输出该变量。下面是一个 JS 文件,里面使用export
命令输出变量。
// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;
上面代码是profile.js
文件,保存了用户信息。ES6 将其视为一个模块,里面用export
命令对外部输出了三个变量。
export
的写法,除了像上面这样,还有另外一种。
// profile.jsvar firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};
上面代码在export
命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在var
语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
export
命令除了输出变量,还可以输出函数或类(class)。
export function multiply(x, y) { return x * y;};
上面代码对外输出一个函数multiply
。
通常情况下,export
输出的变量就是本来的名字,但是可以使用as
关键字重命名。
function v1() { ... }function v2() { ... }export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion};
上面代码使用as
关键字,重命名了函数v1
和v2
的对外接口。重命名后,v2
可以用不同的名字输出两次。
需要特别注意的是,export
命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 报错export 1;// 报错var m = 1;export m;
上面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量m
,还是直接输出1。1
只是一个值,不是接口。正确的写法是下面这样。
// 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1;export {n as m};
上面三种写法都是正确的,规定了对外的接口m
。其他脚本可以通过这个接口,取到值1
。它们的实质是,在接口名与模块内部变量之间,建立了一一对应的关系。
同样的,function
和class
的输出,也必须遵守这样的写法。
// 报错function f() {}export f;// 正确export function f() {};// 正确function f() {}export {f};
另外,export
语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
export var foo = 'bar';setTimeout(() => foo = 'baz', 500);
上面代码输出变量foo
,值为bar
,500毫秒之后变成baz
。
这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新,详见下文《ES6模块加载的实质》一节。
最后,export
命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,下一节的import
命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了ES6模块的设计初衷。
function foo() { export default 'bar' // SyntaxError}foo()
上面代码中,export
语句放在函数之中,结果报错。
import 命令
使用export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过import
命令加载这个模块。
// main.jsimport {firstName, lastName, year} from './profile';function setName(element) { element.textContent = firstName + ' ' + lastName;}
上面代码的import
命令,用于加载profile.js
文件,并从中输入变量。import
命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js
)对外接口的名称相同。
如果想为输入的变量重新取一个名字,import
命令要使用as
关键字,将输入的变量重命名。
import { lastName as surname } from './profile';
import
后面的from
指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js
路径可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。
import {myMethod} from 'util';
上面代码中,util
是模块文件名,由于不带有路径,必须通过配置,告诉引擎怎么取到这个模块。
注意,import
命令具有提升效果,会提升到整个模块的头部,首先执行。
foo();import { foo } from 'my_module';
上面的代码不会报错,因为import
的执行早于foo
的调用。这种行为的本质是,import
命令是编译阶段执行的,在代码运行之前。
由于import
是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
// 报错import { 'f' + 'oo' } from 'my_module';// 报错let module = 'my_module';import { foo } from module;// 报错if (x === 1) { import { foo } from 'module1';} else { import { foo } from 'module2';}
上面三种写法都会报错,因为它们用到了表达式、变量和if
结构。在静态分析阶段,这些语法都是没法得到值的。
最后,import
语句会执行所加载的模块,因此可以有下面的写法。
import 'lodash';
上面代码仅仅执行lodash
模块,但是不输入任何值。
如果多次重复执行同一句import
语句,那么只会执行一次,而不会执行多次。
import 'lodash';import 'lodash';
上面代码加载了两次lodash
,但是只会执行一次。
import { foo } from 'my_module';import { bar } from 'my_module';// 等同于import { foo, bar } from 'my_module';
上面代码中,虽然foo
和bar
在两个语句中加载,但是它们对应的是同一个my_module
实例。也就是说,import
语句是 Singleton 模式。
- Es6 中 export和import详解
- ES6 模块化(Module)export和import详解
- ES6模块之export和import详解
- 详解JavaScript ES6中export import与export default的用法和区别
- export 与 export default import 详解| es6
- ES6中的export、import、export default详解
- ES6中的import和export
- ES6 module export和import
- ES6基础--import和export
- RequireJS-CommonJS-AMD-ES6 Import/Export详解
- es6环境中,export与import使用方法
- es6 import 和 export细节说明
- ECMAScript 2015(ES6):import和export命令
- ES6中export及export default、import的区别
- es6 import & export
- js es6 export import
- es6 module / import / export
- ES6 export,import
- 中国共产党中央历届政治局成员名单
- 学习过程中发现和遇到的问题
- Error creating bean 'org.springframework.validation.beanvalidation.OptionalValidatorFactoryBean#0'
- lnmp环境搭建
- IB_DESIGNABLE(@IBDesignable)中[UIImage imageNamed:]的加载不成功问题
- Es6 中 export和import详解
- (12):考虑实现Comparable接口
- FeatureLayer读取属性字段值
- virtualenv搭建虚拟环境
- 将JZ2440调试串口改成COM2
- Codeforces 148D Bag of mice(概率DP入门)
- 类加载机制(类加载过程和类加载器)
- mysql嵌套查询
- EditText只能输入2位小数及一个小数点