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

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

也可以使用default與其他export成員共存同一個模組,而default會最先被定義, 如下方例子:

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

參見

文件標籤與貢獻者

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