Ievads JavaScript moduļu sistēmās

Ievads JavaScript moduļu sistēmās

Moduļu jēdziens nāk no modulārās programmēšanas paradigmas. Šī paradigma ierosina, ka programmatūra jāsastāv no atsevišķiem, savstarpēji aizvietojamiem komponentiem, ko sauc par 'moduļiem', sadalot programmas funkcijas atsevišķos failos, kas var darboties atsevišķi vai savienoti lietojumprogrammā.



DIENAS VIDEO MAKEUSEOF

Modulis ir atsevišķs fails, kas iekapsulē kodu, lai ieviestu noteiktu funkcionalitāti un veicinātu atkārtotu izmantošanu un organizēšanu.





Šeit tiks apskatītas JavaScript lietojumprogrammās izmantotās moduļu sistēmas, tostarp moduļu modelis, CommonJS moduļu sistēma, ko izmanto lielākajā daļā Node.js lietojumprogrammu, un ES6 moduļu sistēma.





Moduļa modelis

Pirms vietējo JavaScript moduļu ieviešanas moduļa dizaina modelis tika izmantots kā moduļu sistēma, lai iekļautu mainīgos un funkcijas vienā failā.

Tas tika ieviests, izmantojot nekavējoties izsauktas funkciju izteiksmes, ko tautā sauc par IIFE. IIFE ir atkārtoti neizmantojama funkcija, kas darbojas, tiklīdz tā ir izveidota.



Šeit ir norādīta IIFE pamatstruktūra:

(function () { 
//code here
})();

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

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

Iepriekš minētais koda bloks apraksta IIFE, ko izmanto trīs dažādos kontekstos.





IIFE tika izmantoti, jo funkcijā deklarētie mainīgie ir ietverti funkcijai, padarot tos pieejamus tikai funkcijā, un tāpēc, ka funkcijas ļauj atgriezt datus (padarot tos publiski pieejamus).

Piemēram:





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");

Iepriekš minētais koda bloks ir piemērs tam, kā moduļi tika izveidoti pirms vietējo JavaScript moduļu ieviešanas.

klēpjdators netiek uzlādēts, kad tas ir pievienots

Iepriekš minētajā koda blokā ir IIFE. IIFE satur funkciju, kuru tas padara pieejamu, to atgriežot. Visi IIFE deklarētie mainīgie ir aizsargāti no globālās darbības jomas. Tādējādi metode ( sakiVārds ) ir pieejams tikai, izmantojot publisko funkciju, callSayName .

Ievērojiet, ka IIFE tiek saglabāts mainīgajā, foo . Tas ir tāpēc, ka bez mainīgā lieluma, kas norāda uz tā atrašanās vietu atmiņā, mainīgie pēc skripta palaišanas būs nepieejami. Šis modelis ir iespējams, jo JavaScript slēgšana .

CommonJS moduļu sistēma

CommonJS moduļu sistēma ir CommonJS grupas definēts moduļa formāts, lai atrisinātu JavaScript tvēruma problēmas, izpildot katru moduli savā nosaukumvietā.

CommonJS moduļu sistēma darbojas, piespiežot moduļus nepārprotami eksportēt mainīgos, kurus tie vēlas pakļaut citiem moduļiem.

Šī moduļu sistēma tika izveidota servera puses JavaScript (Node.js) un tādējādi tas pēc noklusējuma netiek atbalstīts pārlūkprogrammās.

Lai savā projektā ieviestu CommonJS moduļus, vispirms savā lietojumprogrammā ir jāinicializē NPM, izpildot:

npm init -y 

Mainīgos, kas eksportēti, izmantojot CommonJS moduļu sistēmu, var importēt šādi:

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

Moduļi tiek importēti CommonJS, izmantojot pieprasīt paziņojums, kas nolasa JavaScript failu, izpilda lasīšanas failu un atgriež eksportu objektu. The eksportu objekts satur visus modulī pieejamos eksportus.

Varat eksportēt mainīgo, izmantojot CommonJS moduļu sistēmu, izmantojot vai nu nosaukto eksportēšanu, vai noklusējuma eksportēšanu.

Nosaukts Eksports

Nosauktie eksporti ir eksporti, kas identificēti pēc tiem piešķirtajiem nosaukumiem. Atšķirībā no noklusējuma eksportēšanas, ar nosaukumu eksportēšana ļauj veikt vairākus eksportus vienam modulim.

Piemēram:

//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");
};

Iepriekš esošajā koda blokā jūs eksportējat divas nosauktas funkcijas ( myExport un citsEksports ), pievienojot tos eksportu objektu.

Līdzīgi varat eksportēt funkcijas, piemēram:

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,
};

Iepriekš esošajā koda blokā jūs iestatāt eksportu iebilst pret nosauktajām funkcijām. Jūs varat piešķirt tikai eksportu iebilst pret jaunu objektu, izmantojot modulis objektu.

Jūsu kods radīs kļūdu, ja mēģinātu to izdarīt šādi:

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

Ir divi veidi, kā importēt nosauktos eksportus:

1. Importējiet visus eksportētos failus kā vienu objektu un piekļūstiet tiem atsevišķi, izmantojot punktu apzīmējums .

Piemēram:

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

2. Destrukturējiet eksportu no eksportu objektu.

Piemēram:

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

Viena lieta ir izplatīta visās importēšanas metodēs, tās ir jāimportē, izmantojot tos pašus nosaukumus, ar kuriem tie tika eksportēti.

Noklusējuma eksportēšana

Noklusējuma eksportēšana ir eksportēšana, kas apzīmēta ar jebkuru jūsu izvēlētu nosaukumu. Katram modulim var būt tikai viens noklusējuma eksports.

Piemēram:

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

Iepriekš esošajā koda blokā jūs eksportējat klasi ( Foo ), piešķirot no jauna eksportu iebilst pret to.

Noklusējuma eksporta importēšana ir līdzīga nosaukto eksporta vienumu importēšanai, izņemot to, ka to importēšanai varat izmantot jebkuru nosaukumu pēc savas izvēles.

Piemēram:

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

Iepriekš esošajā koda blokā noklusējuma eksportam tika nosaukts nosaukums Bārs , lai gan varat izmantot jebkuru nosaukumu pēc savas izvēles.

ES6 moduļu sistēma

ECMAScript Harmony moduļu sistēma, tautā pazīstama kā ES6 moduļi, ir oficiālā JavaScript moduļu sistēma.

ES6 moduļus atbalsta pārlūkprogrammas un serveri, lai gan pirms to izmantošanas ir nepieciešama neliela konfigurācija.

Pārlūkprogrammās ir jānorāda veids modulis skripta importēšanas tagā.

Tā kā:

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

Programmā Node.js jums ir jāiestata veids uz modulis tavā pack.json failu.

Tā kā:

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

Varat arī eksportēt mainīgos, izmantojot ES6 moduļu sistēmu, izmantojot nosaukto eksportu vai noklusējuma eksportu.

Nosaukts Eksports

Līdzīgi kā CommonJS moduļu importēšana ar nosaukumiem, tie tiek identificēti pēc tiem piešķirtajiem nosaukumiem un ļauj veikt vairākus eksportus vienā modulī.

Piemēram:

//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");
};

ES6 moduļu sistēmā nosauktie eksporti tiek eksportēti, pievienojot mainīgajam prefiksu ar eksportēt atslēgvārds.

Nosauktos eksportus var importēt citā ES6 modulī tādā pašā veidā kā CommonJS:

  • Nepieciešamā eksporta destrukturizācija no eksportu objektu.
  • Importēt visus eksportētos failus kā vienu objektu un piekļūt tiem atsevišķi, izmantojot punktu apzīmējumu.

Šeit ir destrukturizācijas piemērs:

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

Šeit ir visa objekta importēšanas piemērs:

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

Iepriekš esošajā koda blokā zvaigznīte ( * ) nozīmē “viss”. The atslēgvārds piešķir eksportu iebilst pret virkni, kas tai seko, šajā gadījumā foo .

Noklusējuma eksportēšana

Līdzīgi kā CommonJS noklusējuma eksportam, tie tiek identificēti ar jebkuru jūsu izvēlētu nosaukumu, un katram modulim var būt tikai viens noklusējuma eksports.

Piemēram:

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

Noklusējuma eksportēšana tiek izveidota, pievienojot noklusējuma atslēgvārds pēc eksportēt atslēgvārdu, kam seko eksportētā produkta nosaukums.

Noklusējuma eksporta importēšana ir līdzīga nosaukto eksportu importēšanai, izņemot to, ka to importēšanai varat izmantot jebkuru nosaukumu pēc savas izvēles.

Piemēram:

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

Jauktais eksports

ES6 moduļa standarts atšķirībā no CommonJS ļauj vienā modulī veikt gan noklusējuma eksportus, gan eksportēt ar nosaukumu.

Piemēram:

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

Moduļu nozīme

Sadalot kodu moduļos, tie ir ne tikai vieglāk lasāmi, bet arī vairāk izmantojami un arī apkopjami. JavaScript moduļi arī samazina jūsu kodu kļūdu iespējamību, jo visi moduļi pēc noklusējuma tiek izpildīti stingrā režīmā.