Модулі 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.

Цікаві статті...