- PVSM.RU - https://www.pvsm.ru -
В начале прошлого года было предложено ввести в JavaScript возможность динамического импорта. Если кто не знает, то сейчас в JavaScript нативно поддерживается только статическая импортизация и для этого есть причины, но это тема отдельного разговора. Предложение было реализовано и включено в список ближайшего обновления ECMAScript. Google Chrome с 63 версии уже поддерживает эту возможность. Я немного расскажу что это такое и где это может пригодиться.
Динамический импорт (dynamic import) используется почти также как и статический, но имеет несколько ключевых отличий:
Синтаксически динамический импорт подобен вызову функции: import(‘path/to/module.js’);
Команда import(‘path/to/file.js’) возвращает Promise, который перейдет в состояние fulfilled после того, как будет подтянут и установлен сам модуль непосредственно, так и все его зависимости. А это значит, что мы можем написать вот так:
import('path/to/module.js')
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
Или даже так:
const module = await import('path/to/module.js');
Важное замечание: хотя динамический импорт синтаксически и выглядит как вызов функции import(), но функцией не является. Он не наследуется от Function.prototype, а это значит что его нельзя вызвать через call или apply.
Применений динамическому импорту можно найти много, require.js уже давно имеет подобную возможность и webpack, если не ошибаюсь тоже, поэтому многие из вас, наверное, уже давно используют подобный функционал. Теперь это делать можно будет нативно. Но с другой стороны, возможность импортировать динамически, в зависимости от условий, во время рантайма дает и место для более запутанного кода, хотя понимаю что налепить плохой код можно с чем угодно, не в инструменте дело. Пишите ваше мнение в комментарии, что вы думаете о dynamic import.
Более детально можно почитать и посмотреть тут:
https://github.com/tc39/proposal-dynamic-import [1]
https://developers.google.com/web/updates/2017/11/dynamic-import [2]
https://www.youtube.com/watch?v=eg8eLH52d4s&t=31s [3]
Автор: gee_danko
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/320152
Ссылки в тексте:
[1] https://github.com/tc39/proposal-dynamic-import: https://github.com/tc39/proposal-dynamic-import
[2] https://developers.google.com/web/updates/2017/11/dynamic-import: https://developers.google.com/web/updates/2017/11/dynamic-import
[3] https://www.youtube.com/watch?v=eg8eLH52d4s&t=31s: https://www.youtube.com/watch?v=eg8eLH52d4s&t=31s
[4] Источник: https://habr.com/ru/post/455200/?utm_campaign=455200&utm_source=habrahabr&utm_medium=rss
Нажмите здесь для печати.