Модули JavaScript

В этом руководстве вы узнаете о модулях в JavaScript с помощью примеров.

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

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

Предположим, файл с именем greet.js содержит следующий код:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Теперь, чтобы использовать код greet.js в другом файле, вы можете использовать следующий код:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Вот,

• greetPerson()Функция в greet.js экспортируется с помощью exportключевого слова

   export function greetPerson(name) (… )

• Затем мы импортировали greetPerson()в другой файл, используя importключевое слово. Чтобы импортировать функции, объекты и т. Д., Вам нужно обернуть их ( ).

   import ( greet ) from '/.greet.js';

Примечание. Из модуля можно получить доступ только к экспортированным функциям, объектам и т. Д. Вам необходимо использовать exportключевое слово для конкретной функции, объектов и т. Д., Чтобы импортировать их и использовать в других файлах.

Экспорт нескольких объектов

Также можно экспортировать несколько объектов из модуля. Например,

В файле module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

В основном файле

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Вот,

 import ( name, sum ) from './module.js';

Это импортирует как переменную имени, так и sum()функцию из файла module.js .

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

Если объекты (переменные, функции и т. Д.), Которые вы хотите импортировать, уже присутствуют в вашем основном файле, программа может вести себя не так, как вы хотите. В этом случае программа берет значение из основного файла, а не из импортированного файла.

Чтобы избежать конфликтов имен, вы можете переименовать эти функции, объекты и т. Д. Во время экспорта или во время импорта.

1. Переименовать в модуле (файл экспорта)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Здесь при экспорте функции из файла module.js ей присваиваются новые имена (здесь newName1 и newName2). Следовательно, при импорте этой функции новое имя используется для ссылки на эту функцию.

2. Переименуйте в импортируемом файле

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Здесь при импорте функции новые имена (здесь newName1 и newName2) используются для имени функции. Теперь вы используете новые имена для ссылки на эти функции.

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

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

В файле greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Затем при импорте вы можете использовать:

 import random_name from './greet.js';

При выполнении экспорта по умолчанию

• random_name импортируется из greet.js. Так random_nameкак не находится в greet.js, экспорт по умолчанию ( greet()в данном случае) экспортируется как random_name.
• Вы можете напрямую использовать экспорт по умолчанию, не заключая фигурных скобок ().

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

Модули всегда используют строгий режим

По умолчанию модули находятся в строгом режиме. Например,

 // in greet.js function greet() ( // strict by default ) export greet();

Преимущество использования модуля

• Базу кода легче поддерживать, потому что разный код, имеющий разные функции, находится в разных файлах.
• Делает код многоразовым. Вы можете определить модуль и использовать его несколько раз в соответствии с вашими потребностями.

Использование импорта / экспорта может не поддерживаться в некоторых браузерах. Чтобы узнать больше, посетите страницу поддержки импорта / экспорта JavaScript.