Модули в JavaScript

Модули (Modules)

JavaScript модули позволяют вам разбивать код на отдельные файлы.

Это делает поддержание кодовой базы более легким.

Модули используются import используемых в теге <script> для импорта из внешних файлов.

Модули также зависят от type="module".

Пример

<script type="module">
import message from "./message.js";
</script>

Попробуйте сами

экспортом

сфункциииливариаблимодули могут храниться в любом внешнем файле.

Экспорты имеют два типа:именные экспортыиСтандартные экспорты.

Именные экспорты (Named Exports)

Давайте создадим файл с именем person.js и заполним его содержимым, которое мы хотим экспортировать.

Вы можете создавать имена экспортов двумя способами. Один способ - это создание по одному вlined, а другой - одноразовое создание в нижней части файла.

По одному созданию вlined:

person.js

export const name = "Bill";
export const age = 19;

Одноразовое создание в нижней части файла:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Стандартные экспорты (Default Exports)

Давайте создадим еще один файл с именем message.js и продемонстрируем его по умолчанию экспорт.

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

Пример

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;

Импорт

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

Именованный экспортconstructed с использованием фигурных скобок. По умолчанию экспорт не является.

Импорт по именованию

Импорт из файла person.js по именованию:

import { name, age } from "./person.js";

Попробуйте сами

Импорт по умолчанию

Импорт по умолчанию из файла message.js:

import message from "./message.js";

Попробуйте сами

Внимание

Модули доступны только для протоколов HTTP(s).

Веб-страницы, открытые через протокол file://, не могут использовать импорт/экспорт.