Module JavaScript

În acest tutorial, veți afla despre module în JavaScript cu ajutorul exemplelor.

Pe măsură ce programul nostru crește, acesta poate conține multe linii de cod. În loc să puneți totul într-un singur fișier, puteți utiliza module pentru a separa codurile în fișiere separate conform funcționalității lor. Acest lucru face ca codul nostru să fie organizat și mai ușor de întreținut.

Modulul este un fișier care conține cod pentru a efectua o anumită sarcină. Un modul poate conține variabile, funcții, clase etc. Să vedem un exemplu,

Să presupunem că un fișier numit greet.js conține următorul cod:

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

Acum, pentru a utiliza codul greet.js într-un alt fișier, puteți utiliza următorul cod:

 // 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

Aici,

• greetPerson()Funcția în greet.js este exportată folosind exportcuvântul cheie

   export function greetPerson(name) (… )

• Apoi, am importat greetPerson()într-un alt fișier folosind importcuvântul cheie. Pentru a importa funcții, obiecte etc., trebuie să le înfășurați ( ).

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

Notă : Puteți accesa numai funcții, obiecte, etc. exportate din modul. Trebuie să utilizați exportcuvântul cheie pentru anumite funcții, obiecte etc. pentru a le importa și a le utiliza în alte fișiere.

Exportați mai multe obiecte

De asemenea, este posibil să exportați mai multe obiecte dintr-un modul. De exemplu,

În fișierul module.js

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

În fișierul principal,

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

Aici,

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

Aceasta importă atât variabila de nume, cât și sum()funcția din fișierul module.js .

Redenumirea importurilor și exporturilor

Dacă obiectele (variabile, funcții etc.) pe care doriți să le importați sunt deja prezente în fișierul dvs. principal, este posibil ca programul să nu se comporte așa cum doriți. În acest caz, programul ia valoare din fișierul principal în locul fișierului importat.

Pentru a evita conflictele de denumire, puteți redenumi aceste funcții, obiecte etc. în timpul exportului sau în timpul importului.

1. Redenumiți în modul (fișier de export)

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

Aici, în timp ce exportați funcția din fișierul module.js , numele noi (aici, newName1 & newName2) sunt date funcției. Prin urmare, atunci când importați acea funcție, noul nume este folosit pentru a face referire la acea funcție.

2. Redenumiți în fișierul de import

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

Aici, în timp ce importați funcția, noile nume (aici, newName1 & newName2) sunt utilizate pentru numele funcției. Acum utilizați noile nume pentru a face referire la aceste funcții.

Export implicit

De asemenea, puteți efectua exportul implicit al modulului. De exemplu,

În fișierul greet.js :

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

Atunci când importați, puteți utiliza:

 import random_name from './greet.js';

În timp ce efectuați exportul implicit,

• random_name este importat din greet.js. Deoarece, random_namenu este în greet.js, exportul implicit ( greet()în acest caz) este exportată ca random_name.
• Puteți utiliza direct exportul implicit fără a include paranteze cretate ().

Notă : un fișier poate conține exporturi multiple. Cu toate acestea, puteți avea un singur export implicit într-un fișier.

Modulele utilizează întotdeauna modul strict

În mod implicit, modulele sunt în modul strict. De exemplu,

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

Beneficiul utilizării modulului

• Baza de cod este mai ușor de întreținut, deoarece diferite coduri cu funcționalități diferite sunt în fișiere diferite.
• Face codul reutilizabil. Puteți defini un modul și îl puteți folosi de mai multe ori în funcție de nevoile dvs.

Este posibil ca utilizarea importului / exportului să nu fie acceptată în unele browsere. Pentru a afla mai multe, accesați Asistență pentru import / export JavaScript.