O introducere în sistemele de module în JavaScript

Conceptul de module provine din paradigma de programare modulară. Această paradigmă propune ca software-ul să fie compus din componente separate, interschimbabile, numite „module”, prin defalcarea funcțiilor programului în fișiere de sine stătătoare care pot funcționa separat sau cuplate într-o aplicație.

REALIZAREA VIDEOCLIPULUI ZILEI

Un modul este un fișier autonom care încapsulează cod pentru a implementa anumite funcționalități și pentru a promova reutilizarea și organizarea.

Aici veți acoperi sistemele de module utilizate în aplicațiile JavaScript, inclusiv modelul de module, sistemul de module CommonJS utilizat în majoritatea aplicațiilor Node.js și sistemul de module ES6.

Modelul Modulului

Înainte de introducerea modulelor JavaScript native, modelul de proiectare al modulelor a fost folosit ca sistem de module pentru a defini variabilele și funcțiile într-un singur fișier.

Acest lucru a fost implementat folosind expresii de funcție invocate imediat, cunoscute în mod popular sub numele de IIFE. Un IIFE este o funcție nereutilizabilă care rulează imediat ce este creată.

Iată structura de bază a unui IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

Blocul de cod de mai sus descrie IIFE-urile utilizate în trei contexte diferite.

IIFE-urile au fost folosite deoarece variabilele declarate în interiorul unei funcții sunt incluse în funcție, făcându-le accesibile numai în interiorul funcției și pentru că funcțiile vă permit să returnați date (făcându-le accesibile public).

De exemplu:

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

Blocul de cod de mai sus este un exemplu al modului în care au fost create modulele înainte de introducerea modulelor native JavaScript.

Blocul de cod de mai sus conține un IIFE. IIFE conține o funcție pe care o face accesibilă prin returnarea acesteia. Toate variabilele declarate în IIFE sunt protejate de domeniul global. Astfel, metoda ( spune Nume ) este accesibil numai prin intermediul funcției publice, apelațiSayName .

Observați că IIFE este salvat într-o variabilă, foo . Acest lucru se datorează faptului că, fără o variabilă care să indice locația sa în memorie, variabilele vor fi inaccesibile după rularea scriptului. Acest model este posibil datorită Închideri JavaScript .

Sistemul de module CommonJS

Sistemul de module CommonJS este un format de modul definit de grupul CommonJS pentru a rezolva problemele legate de domeniul JavaScript prin executarea fiecărui modul în spațiul său de nume.

Sistemul de module CommonJS funcționează forțând modulele să exporte în mod explicit variabilele pe care doresc să le expună altor module.

Acest sistem de module a fost creat pentru JavaScript pe partea serverului (Node.js) și, ca atare, nu este acceptat implicit în browsere.

Pentru a implementa module CommonJS în proiectul dvs., trebuie mai întâi să inițializați NPM în aplicația dvs. rulând:

npm init -y

Variabilele exportate după sistemul de module CommonJS pot fi importate astfel:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Modulele sunt importate în CommonJS folosind cere instrucțiunea, care citește un fișier JavaScript, execută fișierul citit și returnează exporturi obiect. The exporturi obiectul conține toate exporturile disponibile în modul.

cum să trezești Windows 10 din somn

Puteți exporta o variabilă urmând sistemul de module CommonJS utilizând fie exporturi denumite, fie exporturi implicite.

Exporturi denumite

Exporturile denumite sunt exporturi identificate după numele cărora le-au fost atribuite. Exporturile denumite permit exporturi multiple pe modul, spre deosebire de exporturile implicite.

De exemplu:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

În blocul de cod de mai sus, exportați două funcții numite ( myExport și altExport ) prin atașarea acestora la exporturi obiect.

În mod similar, puteți exporta funcțiile astfel:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

În blocul de cod de mai sus, setați exporturi obiect la funcțiile numite. Puteți atribui doar exporturi obiect la un obiect nou prin intermediul modul obiect.

Codul dvs. ar arunca o eroare dacă ați încerca să faceți acest lucru:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Există două moduri prin care puteți importa exporturi denumite:

1. Importați toate exporturile ca un singur obiect și accesați-le separat folosind notația cu puncte .

Wi-Fi nu are o corecție validă pentru Windows 10 fix

De exemplu:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Destructurați exporturile din exporturi obiect.

De exemplu:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Un lucru este comun în toate metodele de import, acestea trebuie importate folosind aceleași nume cu care au fost exportate.

Exporturi implicite

Un export implicit este un export identificat prin orice nume la alegere. Puteți avea doar un export implicit pentru fiecare modul.

De exemplu:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

În blocul de cod de mai sus, exportați o clasă ( Foo ) prin reatribuirea exporturi obiectează la aceasta.

Importarea exporturilor implicite este similară cu importul exporturilor denumite, cu excepția faptului că puteți utiliza orice nume dorit pentru a le importa.

De exemplu:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

În blocul de cod de mai sus, exportul implicit a fost numit Bar , deși puteți folosi orice nume la alegere.

Sistemul de module ES6

Sistemul de module ECMAScript Harmony, cunoscut sub numele de module ES6, este sistemul oficial de module JavaScript.

Modulele ES6 sunt acceptate de browsere și servere, deși aveți nevoie de puțină configurare înainte de a le utiliza.

În browsere, trebuie să specificați tip la fel de modul în eticheta de import de script.

Ca astfel:

//index.html 
<script src="./app.js" type="module"></script>

În Node.js, trebuie să setați tip la modul în dumneavoastră pachet.json fişier.

Ca astfel:

//package.json 
"type":"module"

De asemenea, puteți exporta variabile folosind sistemul de module ES6 utilizând fie exporturi denumite, fie exporturi implicite.

Exporturi denumite

Similar importurilor cu nume în modulele CommonJS, acestea sunt identificate după numele cărora le-au fost atribuite și permit exporturi multiple pe modul.

De exemplu:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

În sistemul de module ES6, exporturile denumite sunt exportate prin prefixarea variabilei cu export cuvânt cheie.

Exporturile denumite pot fi importate într-un alt modul în ES6 în aceleași moduri ca CommonJS:

cum să transformi videoclipul în fotografie live

Destructurarea exporturilor necesare din exporturi obiect.
Importul tuturor exporturilor ca un singur obiect și accesarea lor separat folosind notația punct.

Iată un exemplu de destructurare:

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Iată un exemplu de importare a întregului obiect:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

În blocul de cod de mai sus, asteriscul ( * ) înseamnă „toate”. The la fel de cuvântul cheie atribuie exporturi obiect la șirul care îl urmează, în acest caz, foo .

Exporturi implicite

Similar cu exporturile implicite în CommonJS, acestea sunt identificate prin orice nume la alegere și puteți avea doar un export implicit per modul.

De exemplu:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Exporturile implicite sunt create prin adăugarea Mod implicit cuvânt cheie după export cuvânt cheie, urmat de numele exportului.

Importarea exporturilor implicite este similară cu importul exporturilor denumite, cu excepția faptului că puteți utiliza orice nume dorit pentru a le importa.

De exemplu:

//otherModule.js 
import Bar from "./main.js";

Exporturi mixte

Standardul modulului ES6 vă permite să aveți atât exporturi implicite, cât și exporturi denumite într-un singur modul, spre deosebire de CommonJS.

De exemplu:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Importanța modulelor

Împărțirea codului în module nu numai că le face mai ușor de citit, dar îl face mai reutilizabil și, de asemenea, mai ușor de întreținut. Modulele din JavaScript fac codul mai puțin predispus la erori, deoarece toate modulele sunt executate implicit în mod strict.