ES modules ES10
Теперь у нас есть выбор между статическим ( import ) и динамическим ( import() ) импортом
Динамический импорт представлен новой функцией import(), возвращающей промис
Строго говоря, import() не является функцией в смысле наследования от Function, это вообще не объект
📌 Примечательно то, что в файле index12.js нет директивы export
Однако импорт сработал, и скрипт запустился
В этом примере скрипты импортируются динамически, последовательно, с задержкой в несколько секунд
import ( `${scriptFile}12.js` )
.then( module => {
setTimeout (
() => import ( `${scriptFile}21.js` )
.then (
setTimeout (
() => import ( `${scriptFile}22.js` ),
10000
),
20000
),
10000
)
})Используем асинхронную функцию для упрощения кода:
const scriptImports = async moduleFile => {
const timeOut = timeInterval => new Promise (
resolve => setTimeout ( () => resolve(), timeInterval )
)
await import ( `${moduleFile}12.js` )
await timeOut ( 8000 )
await import ( `${moduleFile}21.js` )
await timeOut ( 12000 )
await import ( `${moduleFile}22.js` )
}
Предположим, в разметке мы подключили скрипт index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES Modules</title>
</head>
<body>
<script src = "js/index.js"></script>
</body>
</html>Код файла index.js создает элемент <script> с атрибутом type = "module" и вставляет его на страницу
let mod = document.body.appendChild (
document.createElement ( "script" )
)
mod.type = "module"В элемент <script> помещается код, который импортирует функцию showMessage из файла js/testESModules.js
и вызывает ее с текстом "Hi, students! Welcome to new age of ES Modules!"
mod.textContent = `
import {showMessage} from './js/testESModules.js';
showMessage ( "Hi, students! Welcome to new age of ES Modules!" )
`Полный код:
let mod = document.body.appendChild (
document.createElement ( "script" )
)
mod.type = "module"
mod.textContent = `
import {showMessage} from './js/testESModules.js';
showMessage ( "Hi, students! Welcome to new age of ES Modules!" )
`Именованый экспорт в файле js/testESModules.js
export function showMessage ( message ) {
var demo = document.createElement ( 'div' )
demo.style = `
position: fixed;
top: 15%; left: 15%;
bottom: 15%; right: 15%;
box-shadow: 10px 10px 16px #00000090;
border: solid 0.5px #bbb;
padding: 30px;
z-index: 300;
background-color: #000;
`
document.body.appendChild ( demo )
demo.innerHTML = `
<h2 style='color: #789'>Module was successfully imported</h2>
<p style='color: #fa0'>Now you can see how it works :)</p>
<hr>
<p style='color: #dde'>${message}</p>
`
setTimeout ( () => {
document.body.removeChild ( demo )
}, 10000 )
}import {showMessage} from 'https://example.com/js/testESModules.js';или относительный путь, начинающийся с /, ./ или ../
import {showMessage} from './js/testESModules.js';В противном случае импорт завершится неудачей
Курсы были созданы для студентов A-Level Ukraine.
Использование данных материалов или любой их части коммерческими школами ( курсами ) является нарушением авторских прав.
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 |
| ⏬ |
|---|
- Блок-схема алгоритма
- Developer Tools
- Chrome DevTools
- Переменные
- Оператор typeof
- Структуры данных
- Операторы присваивания
- Логические выражения
- Условные операторы
- Инкремент
- Свойство length
- Оператор цикла for
- UTF-8
Homework
- Нативные и host-объекты
- Литерал объекта
- Унаследованные свойства
- Конструктор
- Модель наследования
- Публичные и приватные свойства
- Оператор in
1- Homework
- Итерирующие методы массивов
- Тестирование производительности
- SHA
- Homework
- strict mode
- Вычисляемые имена свойств
- Краткий синтаксис методов
- Краткий литерал объекта
- Классы
- Homework
- npm
- webpack
- Упражнение 1
- ES6 модули
- Упражнение 2
- --mode | --watch
- Упражнение 3
- Упражнение 4
- Упражнение 5
- Упражнение 6
- Упражнение 7
- Упражнение 8
- Homework
| ⏫ |
|---|
Дополнительно
Справочная инфо
Git Bush
TCP/IP
Коды символов