Содержание

Слайд 2

Модули

Модули

Слайд 3

Модули в ES6

Модулем считается файл с кодом. В этом файле ключевым

Модули в ES6 Модулем считается файл с кодом. В этом файле ключевым
словом export помечаются переменные и функции, которые могут быть использованы снаружи. Другие модули могут подключать их через вызов import
Целью модулей es6 было создание формата, удобного как для пользователей CJS, так и для пользователей AMD. В связи с этим они имеют такой же компактный синтаксис, как и модули CJS. С другой стороны, они не такие динамичные как и AMD

Слайд 4

Особенности

На этапе компиляции возникнет ошибка, если попытаться импортировать что-то, что не

Особенности На этапе компиляции возникнет ошибка, если попытаться импортировать что-то, что не
было предварительно экспортировано
Можно легко осуществить асинхронную загрузку модулей
Декларативный синтаксис (для импорта и экспорта)
Программная загрузка (чтобы задать конфигурацию загрузки модулей и для условной загрузки модулей)

Слайд 5

Пример

При запуске в chrome видим ошибку Uncaught SyntaxError: Unexpected token import. Слабая

Пример При запуске в chrome видим ошибку Uncaught SyntaxError: Unexpected token import.
поддержка браузеров. Необходимо использовать babel.js либо аналогичный инструмент

// lib/math.js
export function sum (x, y) { return x + y; }
export var pi = 3.141593;
// index.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));
// other.js
import { sum, pi } from "lib/math";
console.log("2π = " + sum(pi, pi));

Слайд 6

Export

export { name1, name2, …, nameN };
export { variable1 as name1, variable2

Export export { name1, name2, …, nameN }; export { variable1 as
as name2, …, nameN };
export let name1, name2, …, nameN;//или var, const
export let name1 = …, name2 = …, …, nameN;//или var, const
export default выражение;
export default function (…) { … } //или class, function*
export default function name1(…) { … } //или class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

Слайд 7

Export переменных
возможно перед объявлением переменных, функций и классов
возможно отдельно, при

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

export let one = 1;

let two = 2;
export {two};

export {one, two};

Слайд 8

Ключевое слово AS

При AS можно указать, что переменная one будет доступна снаружи

Ключевое слово AS При AS можно указать, что переменная one будет доступна
(экспортирована) под другим именем .
Пример:
export {one as once, two as twice};

Слайд 9

Export функций и классов

export class User {
constructor(name) {
this.name = name;

Export функций и классов export class User { constructor(name) { this.name =
}
};
export function sayHi() {
console.log("Hello!");
};
//export {User, sayHi}

Слайд 10

Экспорт по умолчанию

Иногда модуль экспортирует только одно значение (класс). В таком случае

Экспорт по умолчанию Иногда модуль экспортирует только одно значение (класс). В таком
удобно определить это значение как экспортируемое по умолчанию

//user.js
export default class User {
constructor(name) {
this.name = name;
}
};
//login.js:
import User from './user';
new User("Петя");

Слайд 11

Import

import defaultMember from "module-name";
import * as name from "module-name";
import {

Import 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";

Другие модули могут подключать экспортированные значения при помощи ключевого слова import

Слайд 12

Пример

//nums.js:
export let one = 1;
export let two = 2;
//1.js
import {one, two} from

Пример //nums.js: export let one = 1; export let two = 2;
"./nums";
console.log(`${one} and ${two}`);//1 and 2
//2.js
//использование as
//импорт one под именем item1, а two – под именем item2
import {one as item1, two as item2} from "./nums";
console.log(`${item1} and ${item2}`);//1 and 2

Слайд 13

Импорт всех значений в виде объекта

import * as numbers from "./nums";
//теперь экспортированные

Импорт всех значений в виде объекта import * as numbers from "./nums";
переменные - свойства numbers
console.log(`${numbers.one} and ${numbers.two}`);//1 and 2

Слайд 14

Встроенные модули

//ES5

//ES6

Слайд 15

Импорт модулей и загрузка скриптов

System.import(['module1', 'module2'],
function (module1, module2) { //успешное

Импорт модулей и загрузка скриптов System.import(['module1', 'module2'], function (module1, module2) { //успешное
выполнение … },
function (err) { //ошибка … } );
Имя файла: Модули.pptx
Количество просмотров: 51
Количество скачиваний: 0