import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。
注意:此功能目前无法在任何浏览器中实现。它在许多转换器中实现,例如 Traceur Compiler , Babel , Rollup 或 Webpack。
语法EDIT
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
- name
- 导入将会引用的对象的名称。。
member, memberN
- 将要导入的导出成员的名称。
defaultMember
- 将引用从模块默认导出的名称。
alias, aliasN
- 将引用命名导入的名称。
module-name
- 要导入的模块的名称。
描述EDIT
name 参数是将引用导出成员的名称。member参数指定独立成员,而name参数导入所有成员。如果模块导出单个默认参数,而不是一系列成员,
name也可以是函数。
下面提供一些示例说明语法。
导入整个模块的内容。以下代码将myModule添加到当前作用域,其中包括所有导出绑定。
import * as myModule from "my-module";
导入模块的单个成员。以下代码将myMember添加到当前作用域。
import {myMember} from "my-module";
导入模块的多个成员。以下代码会将foo和
bar都添加到当前作用域
。
import {foo, bar} from "my-module";
导入整个模块的内容,其中一些被显式命名。
以下代码将myModule
,foo,
bar插入到当前作用域。注意,
foo
和myModule.foo
是完全相同的,bar
和myModule.bar也是如此。
import MyModule, {foo, bar} from "my-module";
导入成员并指定一个方便的别名。以下代码将shortName添加到当前作用域。
import {reallyReallyLongModuleMemberName as shortName} from "my-module";
导入整个模块 使用模块副作用,不导入任何绑定。
import "my-module";
使用别名导入模块的多个成员。
import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";
导入默认值
可以导出默认选项,无论是一个对象,一个函数或一个 class。相对地, 也可以使用 import 导入默认成员。
最简单版本,直接导入默认。
import myDefault from "my-module";
也可以使用上面提到的方式导入命名空间。
import myDefault, * as myModule from "my-module";
// myModule used as a namespace
或者导入已有命名的默认项。这两种情况下,默认导入项必须最先声明。
import myDefault, {foo, bar} from "my-module";
// specific, named imports
EDIT
范例EDIT
导入一个辅助文件以协助处理 AJAX JSON 请求。
// --file.js--
function getJSON(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback(this.responseText)
};
xhr.open("GET", url, true);
xhr.send();
}
export function getUsefulContents(url, callback) {
getJSON(url, data => callback(JSON.parse(data)));
}
// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://www.example.com", data => {
doSomethingUseful(data);
});
规范EDIT
规范 | 状态 | 注解 |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) Imports |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) Imports |
Draft |
浏览器兼容性EDIT
特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本支持 | 未实现[2] | 未实现[1] | 未实现 | 未实现 | 未实现 |
特性 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本支持 | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
[1] 查看 bug 568953.
[2] 查看 Chromium bug 1569
[3] "启用实验性JavaScript功能" 标记的背后
[4] See Safari Technical Preview 21 版本注释