import

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это экспериментальная технология, часть предложения Harmony (ECMAScript 6).
Поскольку спецификация этой технологии ещё не стабилизировалась, проверьте таблицу совместимости её использования в различных браузерах. Также обратите внимание, что синтаксис и поведение экспериментальной технологии могут быть изменены в будущих версиях браузеров в соответствии с изменениями в спецификации.

Инструкция import используется для импорта функций, объектов или примитивов, экспортированных из внешнего модуля, другого скрипта и т.д.

Внимание: Эта функциональность не реализована ни одним из браузеров. Но присутствует во многих транспиляторах, например, в Traceur Compiler, Babel или Rollup.

Синтаксис

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
Имя объекта, которое получит значения экспорта по умолчанию (export default) из модуля.
alias, aliasN
Имя обьекта, который получит импортируемые свойства.
module-name
Имя модуля для импорта. Это имя файла.

Описание

Параметр name это имя обьекта, который получит (все) экспортированные значения.

Параметры member определяют отдельные (конкретные) значения, в то время как name импортирует все значения. name может быть функцией если в модуле реализован "экспорт по-умолчанию" вместо экспорта ряда значений (переменных, классов, объектов). Ниже приведены примеры, чтобы прояснить синтаксис.

Импорт всего содержимого модуля. Это вставит объект myModule в текущую область видимости, содержащую все экспортированные значения из "my-module.js".

import * as myModule from "my-module";

Импорт единственного (конкретного) значения из модуля. Эта инструкция вставит myMember в текущую область видимости.

import {myMember} from "my-module";

Импорт нескольких значений. Оба (foo и bar) теперь в текущей области видимости.

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

Импорт содержимого всего модуля, с некоторыми явно указанными методами. myModulefoo и 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.js";

Примеры

Импорт файла для помощи в обработке запроса 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);
});

Спецификации

Спецификация Статус Комменарий
ECMAScript 2015 (6th Edition, ECMA-262)
Определение 'Imports' в этой спецификации.
Стандарт Начальное определение.
ECMAScript Latest Draft (ECMA-262)
Определение 'Imports' в этой спецификации.
Черновик  

Совместимость

Возможность Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 60 (flag)[2][5] 38 (14.14342) (flag)[3][5] 54 (54) (flag)[1][5] Нет 47 (flag)[6] 10.1[4][5]
Возможность Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка Нет 36.0 Нет Нет 47(flag)[6] Нет 60(flag)[6]

[1] See баг 568953.

[2] See Chromium bug 1569

[3] Behind the "Enable experimental JavaScript features" flag(about:flags)

[4] See Safari Technical Preview 21 Release Notes

[5] See ECMAScript modules in browsers

[6] See Modules (ES6) - Chrome Platfrom Status

Смотри также

Метки документа и участники

 Внесли вклад в эту страницу: nikolaifedorov, maxmind, torbasow, standy, vvalgis, Enclave88, kurzgame
 Обновлялась последний раз: nikolaifedorov,