Модули on JSFlow

Модули: введение

Mon, 01 Jan 0001 00:00:00 +0000

Модули: введение #

Модуль — отдельный файл JavaScript со своей областью видимости. Другие файлы подключают его через import и получают только то, что модуль явно экспортировал. Так код делят на независимые части без глобальных конфликтов имён.

Зачем модули #

Без модулей	С модулями
Всё в глобальной области `window`	Переменные по умолчанию локальны для файла
Порядок `<script>` критичен	Зависимости описаны в `import`
Сложно переиспользовать в проекте	Файл = единица публикации API
Риск коллизий `utils`, `config`	Имена экспорта контролируются явно

// cart.js — только экспорт виден снаружи
const taxRate = 0.2

export function lineTotal(price, qty) {
 return price * qty * (1 + taxRate)
}

taxRate снаружи cart.js недоступен — не засоряет глобальную область.

export и import

Mon, 01 Jan 0001 00:00:00 +0000

export и import #

export публикует привязки (переменные, функции, классы) из модуля. import подключает их в другой файл. Связь статическая: анализатор знает зависимости до выполнения кода.

Именованный экспорт #

Несколько сущностей из одного файла — каждая со своим именем:

// pricing.js
export const currency = 'RUB'

export function formatMoney(amount) {
 return `${amount.toFixed(2)} ${currency}`
}

export class PriceError extends Error {
 constructor(message) {
 super(message)
 this.name = 'PriceError'
 }
}

Импорт с теми же именами или с переименованием:

import { currency, formatMoney } from './pricing.js'
import { formatMoney as fmt } from './pricing.js'

fmt(1990) // "1990.00 RUB"

Фигурные скобки обязательны для именованного импорта — это не деструктуризация объекта, а статический список привязок модуля.

Динамический import()

Mon, 01 Jan 0001 00:00:00 +0000

Динамический import() #

import() — функция, возвращающая промис с модулем. В отличие от статического import, её можно вызывать в runtime: по условию, по событию, после задержки. Это основа ленивой загрузки и разбиения бандла на чанки.

Синтаксис и результат #

const spec = './admin/reports.js'

import(spec).then((module) => {
 module.renderSalesChart()
})

Выражение в скобках — строка с URL модуля (часто переменная). Результат — промис, который fulfilled с namespace object модуля:

именованные экспорты — свойства объекта (module.formatMoney);
default — module.default.

import('./playlist-editor.js').then((mod) => {
 const Editor = mod.default
 const { MAX_TRACKS } = mod
 new Editor({ limit: MAX_TRACKS })
})

С await: