Es6 中 export和import详解
2017-04-01 10:39
459 查看
模块功能主要由两个命令构成:
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用
JS 文件,里面使用
上面代码是
上面代码在
上面代码对外输出一个函数
通常情况下,
上面代码使用
需要特别注意的是,
上面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量
上面三种写法都是正确的,规定了对外的接口
同样的,
另外,
上面代码输出变量
这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新,详见下文《ES6模块加载的实质》一节。
最后,
上面代码中,
使用
c76f
义了模块的对外接口以后,其他 JS 文件就可以通过
上面代码的
如果想为输入的变量重新取一个名字,
JavaScript 引擎该模块的位置。
上面代码中,
注意,
上面的代码不会报错,因为
由于
上面三种写法都会报错,因为它们用到了表达式、变量和
最后,
上面代码仅仅执行
如果多次重复执行同一句
上面代码加载了两次
上面代码中,虽然
Singleton 模式。
export和
import。
export命令用于规定模块的对外接口,
import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用
export关键字输出该变量。下面是一个
JS 文件,里面使用
export命令输出变量。
// profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
上面代码是
profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用
export命令对外部输出了三个变量。
export的写法,除了像上面这样,还有另外一种。
// profile.js var 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命令定
c76f
义了模块的对外接口以后,其他 JS 文件就可以通过
import命令加载这个模块。
// main.js import {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实现模块化详解
- export 与 export default import 详解| es6
- Sqoop-1.4.4工具import和export使用详解
- Sqoop-1.4.4工具import和export使用详解
- ES6 export import
- 如何让浏览器支持ES6中的import和export语法
- Hive之import和export使用详解
- Sqoop-1.4.4工具import和export使用详解
- ES6 export,import
- Sqoop-1.4.6工具import和export使用详解(官网)
- 关于es6中的import,export, export default
- es6 import 和 export细节说明
- Sqoop-1.4.4工具import和export使用详解
- ES6新特性:使用export和import实现模块化
- Sqoop-1.4.4工具import和export使用详解
- es6 module 之import export
- [转]Sqoop-1.4.4工具import和export使用详解
- ES6新特性:使用export和import实现模块化
- Sqoop-1.4.4工具import和export使用详解
- 关于ES6的一些小tips——export 与 import