Úvod do modulových systémov v JavaScripte

Úvod do modulových systémov v JavaScripte

Koncept modulov vychádza z modulárneho programovania. Táto paradigma navrhuje, že softvér by sa mal skladať zo samostatných, zameniteľných komponentov nazývaných „moduly“ rozdelením funkcií programu do samostatných súborov, ktoré môžu fungovať samostatne alebo spojené v aplikácii.





VYUŽITIE VIDEA DŇA

Modul je samostatný súbor, ktorý zapuzdruje kód, aby implementoval určitú funkčnosť a podporil opätovnú použiteľnosť a organizáciu.



Tu pokryjete modulové systémy používané v aplikáciách JavaScript, vrátane vzoru modulov, systému modulov CommonJS používaného vo väčšine aplikácií Node.js a systému modulov ES6.





Vzor modulu

Pred zavedením natívnych modulov JavaScriptu sa vzor návrhu modulu používal ako modulový systém na rozsah premenných a funkcií do jedného súboru.

Toto bolo implementované pomocou okamžite vyvolaných funkčných výrazov, všeobecne známych ako IIFE. IIFE je neopakovateľne použiteľná funkcia, ktorá sa spustí hneď po vytvorení.



Tu je základná štruktúra IIFE:

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

Vyššie uvedený blok kódu popisuje IIFE používané v troch rôznych kontextoch.



IIFE boli použité, pretože premenné deklarované vo funkcii sú obmedzené na funkciu, vďaka čomu sú prístupné iba vo funkcii, a pretože funkcie umožňujú vracať údaje (sprístupniť ich verejnosti).

Napríklad:



Obchod Google Play bohužiaľ zastavil kartu Samsung 2 
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");

Vyššie uvedený blok kódu je príkladom toho, ako boli moduly vytvorené pred zavedením natívnych modulov JavaScriptu.

Vyššie uvedený blok kódu obsahuje IIFE. IIFE obsahuje funkciu, ktorú sprístupňuje jej vrátením. Všetky premenné deklarované v IIFE sú chránené pred globálnym rozsahom. Metóda teda ( sayName ) je prístupný len prostredníctvom verejnej funkcie, callSayName .

Všimnite si, že IIFE sa uloží do premennej, foo . Je to preto, že bez premennej ukazujúcej na jej umiestnenie v pamäti budú premenné po spustení skriptu neprístupné. Tento vzor je možný vďaka Uzávery JavaScriptu .

Modulový systém CommonJS

Systém modulov CommonJS je formát modulu definovaný skupinou CommonJS na riešenie problémov s rozsahom JavaScriptu spustením každého modulu v jeho mennom priestore.

Systém modulov CommonJS funguje tak, že moduly núti explicitne exportovať premenné, ktoré chcú vystaviť iným modulom.

Tento modulový systém bol vytvorený pre JavaScript na strane servera (Node.js) a ako taká nie je štandardne podporovaná v prehliadačoch.

Ak chcete implementovať moduly CommonJS vo svojom projekte, musíte najprv inicializovať NPM vo svojej aplikácii spustením:

npm init -y

Premenné exportované podľa systému modulov CommonJS možno importovať takto:

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

Moduly sa importujú do CommonJS pomocou vyžadovať príkaz, ktorý načíta súbor JavaScript, vykoná súbor na čítanie a vráti súbor exportov objekt. The exportov obsahuje všetky dostupné exporty v module.

Premennú môžete exportovať podľa systému modulov CommonJS pomocou pomenovaných exportov alebo predvolených exportov.

Pomenované exporty

Pomenované exporty sú exporty identifikované priradenými názvami. Pomenované exporty umožňujú viacero exportov na modul, na rozdiel od predvolených exportov.

Napríklad:

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

Vo vyššie uvedenom bloku kódu exportujete dve pomenované funkcie ( myExport a inýExport ) ich pripojením k exportov objekt.

Podobne môžete exportovať funkcie takto:

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

Vo vyššie uvedenom bloku kódu nastavíte exportov objekt na pomenované funkcie. Môžete priradiť iba exportov objekt na nový objekt cez modul objekt.

Váš kód by vyvolal chybu, ak by ste sa to pokúsili urobiť týmto spôsobom:

ako vytvoriť bootovacie USB z Windows 10 
//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Existujú dva spôsoby, ako môžete importovať pomenované exporty:

1. Importujte všetky exporty ako jeden objekt a pristupujte k nim samostatne pomocou bodkový zápis .

Napríklad:

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

2. Deštruktúrujte exporty z exportov objekt.

Napríklad:

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

Jedna vec je spoločná pre všetky spôsoby importu, musia byť importované s rovnakými názvami, s ktorými boli exportované.

Predvolené exporty

Predvolený export je export identifikovaný ľubovoľným názvom podľa vášho výberu. Pre každý modul môžete mať iba jeden predvolený export.

Napríklad:

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

V bloku kódu vyššie exportujete triedu ( Foo ) opätovným priradením exportov namietať proti tomu.

Importovanie predvolených exportov je podobné importovaniu pomenovaných exportov s tým rozdielom, že na ich import môžete použiť ľubovoľný názov podľa vlastného výberu.

Napríklad:

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

V bloku kódu vyššie bol pomenovaný predvolený export Bar , hoci môžete použiť ľubovoľné meno.

Modulový systém ES6

Modulový systém ECMAScript Harmony, ľudovo známy ako moduly ES6, je oficiálny modulový systém JavaScriptu.

Moduly ES6 sú podporované prehliadačmi a servermi, aj keď pred ich použitím potrebujete trochu konfigurácie.

V prehliadačoch musíte zadať typu ako modul v značke importu skriptu.

Ako:

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

V Node.js musíte nastaviť typu do modul v tvojom package.json súbor.

ako otvoriť súbor tar gz

Ako:

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

Premenné môžete tiež exportovať pomocou modulového systému ES6 pomocou pomenovaných exportov alebo predvolených exportov.

Pomenované exporty

Podobne ako pomenované importy v moduloch CommonJS sú identifikované podľa názvov, ktorým boli priradené, a umožňujú viacero exportov na modul.

Napríklad:

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

V systéme modulov ES6 sa pomenované exporty exportujú tak, že premennej sa predpona export kľúčové slovo.

Pomenované exporty je možné importovať do iného modulu v ES6 rovnakým spôsobom ako CommonJS:

  • Deštrukturalizácia požadovaných vývozov z exportov objekt.
  • Importovanie všetkých exportov ako jedného objektu a samostatný prístup k nim pomocou bodkovej notácie.

Tu je príklad deštrukturalizácie:

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

Tu je príklad importovania celého objektu:

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

V bloku kódu vyššie je hviezdička ( * ) znamená „všetci“. The ako kľúčové slovo priraďuje exportov námietka proti reťazcu, ktorý za ním nasleduje, v tomto prípade foo .

Predvolené exporty

Podobne ako predvolené exporty v CommonJS sú identifikované ľubovoľným názvom podľa vášho výberu a na modul môžete mať iba jeden predvolený export.

Napríklad:

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

Predvolené exporty sa vytvárajú pridaním predvolená kľúčové slovo po export kľúčové slovo, za ktorým nasleduje názov exportu.

Importovanie predvolených exportov je podobné importovaniu pomenovaných exportov s tým rozdielom, že na ich import môžete použiť ľubovoľný názov podľa vlastného výberu.

Napríklad:

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

Zmiešaný vývoz

Štandard modulu ES6 vám na rozdiel od CommonJS umožňuje mať predvolené exporty aj pomenované exporty v jednom module.

Napríklad:

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

Význam modulov

Rozdelenie kódu do modulov nielenže uľahčuje ich čítanie, ale robí ho viac opakovane použiteľným a udržiavateľným. Moduly v JavaScripte tiež znižujú náchylnosť vášho kódu na chyby, pretože všetky moduly sa štandardne spúšťajú v prísnom režime.