Изучите функции операторов импорта и экспорта

Сегодня я объясню, как работают модули 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;
  }
}

Теперь его можно экспортировать, мы можем использовать его в любом модуле с оператором импорта.

Различные способы экспорта модулей

Для функций экспорта доступны два разных способа.

  1. Именованный экспорт (ноль или более экспорта на модуль)
  2. Экспорт по умолчанию (только один экспорт на модуль)

Пример именованного экспорта

// 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 сегодня.

Спасибо за прочтение!