Изучите функции операторов импорта и экспорта
Сегодня я объясню, как работают модули JavaScript и различные способы импорта и экспорта модулей.
Как правило, на более ранней стадии JavaScript разрабатывается как простой скрипт для снижения производительности, но его количество пользователей увеличивается день ото дня, и он резко превратился в более крупную базу кода. Для поддержки этого увеличения требуется дополнительный механизм, называемый модулями. то есть возможно разделить код на более мелкие и многоразовые блоки.
Модуль - это не что иное, как файл, в который мы можем импортировать из другого модуля с помощью таких директив, как import и export.
Импорт - позволяет импортировать из других модулей.
Экспорт - позволяет использовать функции, которые должны быть доступны извне текущего модуля.
Давайте создадим простое приложение с модулями. Базовая структура нашего приложения
index.html
scripts/
index.js
modules/
user.js
Сначала давайте создадим простой пользовательский модуль с пользовательским классом. Из этого приложения он покажет пользователю экран вывода. Имя пользователя может быть создано из экземпляра пользовательского класса. Давайте углубимся в разные части.
Импорт пользовательского модуля
Оператор импорта позволяет нам импортировать привязки из модуля. Оператор импорта не может использоваться во встроенном скрипте, если мы не определим type = ”module”. Доступны разные способы импорта, в нашем примере мы импортируем пользователя из указанного модуля.
//file: scripts/index.js
import { User } from './modules/user.js'
const user = new User('Juan')
document.getElementById('user-name').innerText = user.name;
Экспорт пользовательского модуля
Для экспорта в другой модуль нам нужно использовать оператор экспорта. Оператор экспорта используется при создании модуля для экспорта своих значений, чтобы его могли использовать другие модули с помощью операторов импорта. В этом примере пользовательский класс экспортирует его из модуля.
// file: scripts/modules/user.js
export class User {
constructor(name) {
this.name = name;
}
}
Теперь его можно экспортировать, мы можем использовать его в любом модуле с оператором импорта.
Различные способы экспорта модулей
Для функций экспорта доступны два разных способа.
- Именованный экспорт (ноль или более экспорта на модуль)
- Экспорт по умолчанию (только один экспорт на модуль)
Пример именованного экспорта
// export features declared earlier
export { myFunction, myVariable };
// export individual features (can export var, let, const, function, class)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };
Экспорт по умолчанию
// export feature declared earlier as default
export { myFunction as default };
// export individual features as default
export default function () { ... }
export default class { .. }
Именованный экспорт используется для экспорта нескольких значений, но во время импорта обязательно использовать то же имя, что и у соответствующего объекта. Экспорт по умолчанию можно импортировать с любым именем.
Импорт
Мы уже знаем концепции экспорта, то же самое применимо и к импорту.
Импорт экспорта по умолчанию
import something from 'mymodule'
console.log(something)
Импорт именованного экспорта
import { var1, var2 } from 'mymodule'
console.log(var1)
console.log(var2)
Переименование импорта
import { var1 as myvar, var2 } from 'mymodule'
// Now myvar will be available instead of var1
console.log(myvar)
console.log(var2)
Импорт всех модулей
import * as anyName from 'mymodule'
console.log(anyName.var1)
console.log(anyName.var2)
console.log(anyName.default)
Динамический импорт
Пока мы имели дело только со статическим импортом, мы поместили их поверх файла, и он импортируется. Но при динамическом импорте позволяет динамически загружать модули только тогда, когда они нужны.
Новая функциональность позволяет вызывать импорт как функцию, передавая путь к модулям в качестве параметра.
import('./modules/myModule.js')
.then((module) => {
// Do something with the module.
});
Комбинирование экспорта по умолчанию и именованного экспорта
Мы можем комбинировать экспорт / импорт по умолчанию и именованный. Давайте посмотрим на примеры
//file: mymodule.js
export const named = 'named export'
export function test() {
console.log('exported function')
}
export default 'default export';
И мы можем импортировать их также в том же сценарии
//another file:
import anyName from './mymodule' // where anyName is the default export
// or both named exports
import { named, test } from './mymodule';
// or just one
import { named } from './mymodule';
// or all of them together
import anyName, { named, test } from './mymodule';
Заключение
Надеюсь, вам понравилось и вы узнали что-то новое о модулях JavaScript сегодня.
Спасибо за прочтение!