Модули на 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.

Интересни статии...