MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

翻譯不完整。請協助 翻譯此英文文件

import 用於引入來自其他檔案、模組(module)、腳本的函式、物件與 primitive。

注意:目前所有瀏覽器都尚未實做此功能。它主要實做於轉譯器中,像是 Traceur CompilerBabelRollupWebpack

語法

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
要引入的模組參照名。

敘述

name 參數是參照導出成員的名字。member 參數會指定 name 要引入的 individual member。以下將進一步闡述語法:

引入整個模組的內容。將插入 myModule 到當前的 scope 裡面,包含所有來自 my-module 模組的 exported binding。大多數源自於 my-module.js。

import * as myModule from 'my-module';

引入模組中特定的member。將插入此模組的此member{myMember}到當前的 scope 裡面。

import {myMember} from 'my-module';

引入模組中數個members。將foo與bar此兩個members插入當前的 scope 裡面。

import {foo, bar} from 'my-module';

Import a member with a more convenient alias. This inserts shortName into the current scope.

import {reallyReallyLongModuleMemberName as shortName}
  from 'my-module';

Import an entire module for side effects only, without importing any bindings.

import 'my-module';

Import multiple members of a module with convenient aliases.

import {
  reallyReallyLongModuleMemberName as shortName,
  anotherLongModuleName as short
} from 'my-module';

Importing defaults

It is possible to have a default export (whether it is an object, a function, a class, etc.). The  import statement may then be used to import such defaults.

The simplest version directly imports the default:

import myDefault from 'my-module';

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

import myDefault, * as myModule from 'my-module';
// myModule used as a namespace

or

import myDefault, {foo, bar} from 'my-module';
// specific, named imports

Examples

Importing a secondary file to assist in processing an AJAX JSON request.

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

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.
Draft  

瀏覽器相容性

特徵 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 No support[2] Build 14342[3] No support[1] No support No support Tech Preview 21[4]
特徵 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本支持 No support 36.0 No support No support No support No support 36.0

[1] 參見 bug 568953

[2] 參見 Chromium bug 1569

[3] Behind the "Enable experimental JavaScript features" flag

[4] See Safari Technical Preview 21 Release Notes

參見

文件標籤與貢獻者

 此頁面的貢獻者: DuckBreeder, iigmir
 最近更新: DuckBreeder,