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

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 到當前的範圍中,包含所有來自 my-module 模組的 exported binding。大多數源自於 my-module.js。

import * as myModule from 'my-module';

引入模組中特定的成員屬性。將插入此模組的此成員屬性{myMember}到當前的範圍中。

import {myMember} from 'my-module';

引入模組中數個成員屬性。將foo與bar此兩個成員屬性插入當前的範圍中。

import {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';

default引入方法(語法糖)

可以使用  import 語法引入模組的  default (它有可能是一個物件、一個方法或一個類別等)。

最簡單的引入方法如下:

import myDefault from 'my-module';

// 實際上等於:
import {default as 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 會成為一個 { } 物件,它的屬性成員為 my-module.js 所有 export 的項目

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.
Living Standard  

瀏覽器相容性

特徵 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

參見

文件標籤與貢獻者

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