ЈаваСцрипт модули

У овом упутству ћете научити о модулима у ЈаваСцрипт-у помоћу примера.

Како наш програм расте, може садржавати много линија кода. Уместо да све ставите у једну датотеку, можете користити модуле за одвајање кодова у одвојене датотеке према њиховој функционалности. То чини наш код организованим и лакшим за одржавање.

Модул је датотека која садржи код за извршавање одређеног задатка. Модул може садржати променљиве, функције, класе итд. Погледајмо пример,

Претпоставимо да датотека са именом греет.јс садржи следећи код:

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

Сада, да бисте користили код греет.јс у другој датотеци, можете користити следећи код:

 // 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()Функција у греет.јс се извози користи exportкључне речи 
     export function greetPerson(name) (… )
  • Затим смо увезли greetPerson()другу датотеку помоћу importкључне речи. Да бисте увезли функције, објекте итд., Морате их обмотати ( ). 
     import ( greet ) from '/.greet.js';

Напомена : Извоженим функцијама, објектима итд. Можете приступити само са модула. Морате користити exportкључну реч за одређену функцију, објекте итд. Да бисте их увезли и користили у другим датотекама.

Извоз више објеката

Такође је могуће извести више објеката из модула. На пример,

У датотеци модуле.јс

 // 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()функцију из датотеке модуле.јс .

Преименовање увоза и извоза

Ако су објекти (променљиве, функције итд.) Које желите да увезете већ присутни у вашој главној датотеци, програм се можда неће понашати онако како желите. У овом случају, програм узима вредност из главне датотеке уместо из увезене датотеке.

Да бисте избегли сукобе у именовању, можете преименовати ове функције, објекте итд. Током извоза или током увоза.

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';

Овде, током извоза функције из датотеке модуле.јс , функцији се додељују нова имена (овде невНаме1 & невНаме2). Дакле, при увозу те функције, ново име се користи за референцу на ту функцију.

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';

Овде, током увоза функције, нова имена (овде невНаме1 & невНаме2) се користе за име функције. Сада користите нова имена за референцу на ове функције.

Подразумевани извоз

Такође можете извршити подразумевани извоз модула. На пример,

У датотеци греет.јс :

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

Тада при увозу можете да користите:

 import random_name from './greet.js';

Током извођења подразумеваног извоза,

  • рандом_наме се увози из greet.js. Будући random_nameда није у greet.js, задати извоз ( greet()у овом случају) се извози као random_name.
  • Можете директно да користите подразумевани извоз без затварања витичастих заграда ().

Напомена : Датотека може садржати вишеструки извоз. Међутим, у датотеци можете имати само један подразумевани извоз.

Модули Увек користите строги режим

Модули су подразумевано у строгом режиму. На пример,

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

Предност употребе модула

  • Основу кода је лакше одржавати, јер се различити код који има различите функционалности налази у различитим датотекама.
  • Чини код вишекратним. Можете дефинирати модул и користити га више пута према вашим потребама.

Употреба увоза / извоза можда није подржана у неким прегледачима. Да бисте сазнали више, посетите подршку за увоз / извоз ЈаваСцрипт-а.

Занимљиви Чланци...