Концепция модулей исходит из парадигмы модульного программирования. Эта парадигма предполагает, что программное обеспечение должно состоять из отдельных взаимозаменяемых компонентов, называемых «модули», разбивая программные функции на автономные файлы, которые могут работать по отдельности или в сочетании друг с другом. приложение.

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

Здесь вы познакомитесь с модульными системами, используемыми в приложениях JavaScript, включая модульный шаблон, модульную систему CommonJS, используемую в большинстве приложений Node.js, и модульную систему ES6.

Шаблон модуля

До появления нативных модулей JavaScript шаблон проектирования модулей использовался как модульная система для ограничения переменных и функций одним файлом.

Это было реализовано с использованием немедленно вызываемых функциональных выражений, широко известных как IIFE. IIFE — это функция, не допускающая повторного использования, которая запускается сразу после создания.

instagram viewer

Вот основная структура IIFE:

(функция () {
// код здесь
})();
(() => {
// код здесь
})();
(асинхронный () => {
// код здесь
})();

Блок кода выше описывает IIFE, используемые в трех различных контекстах.

IIFE использовались потому, что переменные, объявленные внутри функции, относятся к функции, что делает их только доступны внутри функции, и поскольку функции позволяют вам возвращать данные (делая их общедоступными). доступный).

Например:

константа фу = (функция () {
константа sayName = (имя) => {
консоль.бревно(`Эй, меня зовут $ {имя}`);
 };
//Открытие переменных
возвращаться {
 callSayName: (имя) => сказатьИмя (имя),
 };
})();
//Доступ к открытым методам
foo.callSayName("Бар");

Приведенный выше блок кода является примером того, как модули создавались до появления нативных модулей JavaScript.

Блок кода выше содержит IIFE. IIFE содержит функцию, которую он делает доступной, возвращая ее. Все переменные, объявленные в IIFE, защищены от глобальной области видимости. Таким образом, метод (сказатьИмя) доступен только через публичную функцию, callSayName.

Обратите внимание, что IIFE сохраняется в переменной, фу. Это связано с тем, что без переменной, указывающей на ее расположение в памяти, переменные будут недоступны после запуска скрипта. Эта закономерность возможна из-за Закрытие JavaScript.

Модульная система CommonJS

Модульная система CommonJS — это формат модуля, определенный группой CommonJS для решения проблем с областью действия JavaScript путем выполнения каждого модуля в его пространстве имен.

Модульная система CommonJS работает, заставляя модули явно экспортировать переменные, которые они хотят предоставить другим модулям.

Эта модульная система была создана для серверный JavaScript (Node.js) и поэтому не поддерживается по умолчанию в браузерах.

Чтобы внедрить модули CommonJS в свой проект, вы должны сначала инициализировать NPM в своем приложении, выполнив:

инициализация npm -y

Переменные, экспортированные в соответствии с модульной системой CommonJS, можно импортировать следующим образом:

//randomModule.js
//установленный пакет
константа установленный импорт = требовать("имя пакета");
//локальный модуль
константа локальный импорт = требовать("/path-to-module");

Модули импортируются в CommonJS с помощью требовать оператор, который читает файл JavaScript, выполняет прочитанный файл и возвращает экспорт объект. экспорт объект содержит все доступные экспорты в модуле.

Вы можете экспортировать переменную в соответствии с модульной системой CommonJS, используя либо именованный экспорт, либо экспорт по умолчанию.

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

Именованные экспорты — это экспорты, идентифицируемые по присвоенным им именам. Именованные экспорты допускают несколько экспортов на модуль, в отличие от экспорта по умолчанию.

Например:

//main.js
экспорт.myExport = функция () {
консоль.log("Это пример из имя экспорт");
};
exports.anotherExport = функция () {
консоль.log("Это еще один пример из имя экспорт");
};

В приведенном выше блоке кода вы экспортируете две именованные функции (мой экспорт и другойЭкспорт), присоединив их к экспорт объект.

Точно так же вы можете экспортировать функции следующим образом:

константа мойЭкспорт = функция () {
консоль.log("Это пример из имя экспорт");
};
константа другой экспорт = функция () {
консоль.log("Это еще один пример из имя экспорт");
};
модуль.экспорт = {
 мой экспорт,
 другойЭкспорт,
};

В приведенном выше блоке кода вы устанавливаете экспорт возражать против названных функций. Вы можете назначить только экспорт объект на новый объект через модуль объект.

Ваш код выдаст ошибку, если вы попытаетесь сделать это следующим образом:

//Неправильный путь
экспорт = {
 мой экспорт,
 другойЭкспорт,
};

Есть два способа импортировать именованные экспорты:

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

Например:

//otherModule.js
константа фу = требовать("./основной");
фу.myExport();
фу.anotherExport();

2. Деструктурировать экспорт из экспорт объект.

Например:

//otherModule.js
константа {мой экспорт, другой экспорт} = требовать("./основной");
мой Экспорт();
другойЭкспорт();

Одна вещь является общей для всех методов импорта, они должны быть импортированы с использованием тех же имен, с которыми они были экспортированы.

Экспорт по умолчанию

Экспорт по умолчанию — это экспорт, идентифицируемый любым именем по вашему выбору. У вас может быть только один экспорт по умолчанию для каждого модуля.

Например:

//main.js
сортФу{
 бар() {
консоль.log("Это пример из а по умолчаниюэкспорт");
 }
}
модуль.экспорт = Фу;

В приведенном выше блоке кода вы экспортируете класс (Фу), переназначив экспорт возражать против этого.

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

Например:

//otherModule.js
константа Бар = требовать("./основной");
константа объект = новый Бар();
объект.бар();

В приведенном выше блоке кода экспорт по умолчанию был назван Бар, хотя вы можете использовать любое имя по вашему выбору.

Модульная система ES6

Модульная система ECMAScript Harmony, широко известная как модули ES6, является официальной модульной системой JavaScript.

Модули ES6 поддерживаются браузерами и серверами, хотя перед их использованием требуется небольшая настройка.

В браузерах необходимо указать тип как модуль в теге импорта сценария.

Вот так:

//index.html
<источник сценария ="./app.js" тип="модуль"></script>

В Node.js вы должны установить тип к модуль в вашей пакет.json файл.

Вот так:

//package.json
"тип":"модуль"

Вы также можете экспортировать переменные с помощью системы модулей ES6, используя либо именованный экспорт, либо экспорт по умолчанию.

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

Подобно именованному импорту в модулях CommonJS, они идентифицируются по присвоенным им именам и допускают множественный экспорт для каждого модуля.

Например:

//main.js
экспортконстанта мойЭкспорт = функция () {
консоль.log("Это пример из имя экспорт");
};
экспортконстанта другой экспорт = функция () {
консоль.log("Это еще один пример из имя экспорт");
};

В модульной системе ES6 именованные экспорты экспортируются путем добавления к переменной префикса экспорт ключевое слово.

Именованные экспорты можно импортировать в другой модуль в ES6 теми же способами, что и в CommonJS:

  • Деструктуризация необходимого экспорта из экспорт объект.
  • Импорт всех экспортов как единого объекта и доступ к ним по отдельности с использованием точечной нотации.

Вот пример деструктуризации:

//otherModule.js
Импортировать {мой экспорт, другой экспорт} от "./main.js";
мойЭкспорт()
другойЭкспорт()

Вот пример импорта всего объекта:

Импортировать * как фу от './main.js'
фу.myExport()
фу.anotherExport()

В блоке кода выше звездочка (*) означает «все». как ключевое слово назначает экспорт объект на строку, которая следует за ним, в этом случае, фу.

Экспорт по умолчанию

Подобно экспорту по умолчанию в CommonJS, они идентифицируются любым именем по вашему выбору, и вы можете иметь только один экспорт по умолчанию для каждого модуля.

Например:

//main.js
сортФу{
 бар() {
консоль.log("Это пример из а по умолчаниюэкспорт");
 }
}
экспортпо умолчанию Фу;

Экспорт по умолчанию создается путем добавления по умолчанию ключевое слово после экспорт ключевое слово, за которым следует имя экспорта.

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

Например:

//otherModule.js
Импортировать Бар от "./main.js";

Смешанный экспорт

Стандарт модуля ES6 позволяет вам иметь экспорты по умолчанию и именованные экспорты в одном модуле, в отличие от CommonJS.

Например:

//main.js
экспортконстанта мойЭкспорт = функция () {
консоль.log("Это еще один пример из имя экспорт");
};
сортФу{
 бар() {
консоль.log("Это пример из а по умолчаниюэкспорт");
 }
}
экспортпо умолчанию Фу;

Важность модулей

Разделение кода на модули не только упрощает его чтение, но и делает его более удобным для повторного использования и сопровождения. Модули в JavaScript также делают ваш код менее подверженным ошибкам, поскольку по умолчанию все модули выполняются в строгом режиме.