Uvod v sisteme modulov v JavaScriptu

Uvod v sisteme modulov v JavaScriptu

Koncept modulov izhaja iz paradigme modularnega programiranja. Ta paradigma predlaga, da mora biti programska oprema sestavljena iz ločenih, zamenljivih komponent, imenovanih »moduli«, z razčlenitvijo programskih funkcij v samostojne datoteke, ki lahko delujejo ločeno ali povezane v aplikaciji.





MAKEUSEOF VIDEO DNEVA

Modul je samostojna datoteka, ki zajema kodo za izvajanje določene funkcionalnosti ter spodbuja ponovno uporabo in organizacijo.



Tukaj boste obravnavali sisteme modulov, ki se uporabljajo v aplikacijah JavaScript, vključno z vzorcem modulov, sistemom modulov CommonJS, ki se uporablja v večini aplikacij Node.js, in sistemom modulov ES6.





Vzorec modula

Pred uvedbo izvornih modulov JavaScript je bil vzorec oblikovanja modula uporabljen kot sistem modulov za obseg spremenljivk in funkcij v eno datoteko.

To je bilo izvedeno z uporabo takojšnjih funkcijskih izrazov, popularno znanih kot IIFE. IIFE je funkcija, ki je ni mogoče ponovno uporabiti in se zažene takoj, ko je ustvarjena.



Tukaj je osnovna struktura IIFE:

kako dodati geslo google geslom 
(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

Zgornji blok kode opisuje IIFE, ki se uporabljajo v treh različnih kontekstih.



IIFE so bili uporabljeni, ker so spremenljivke, deklarirane znotraj funkcije, omejene na funkcijo, zaradi česar so dostopne le znotraj funkcije, in ker vam funkcije omogočajo vrnitev podatkov (zaradi česar so javno dostopni).

Na primer:



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

Zgornji blok kode je primer, kako so bili moduli ustvarjeni pred uvedbo izvornih modulov JavaScript.

Zgornji kodni blok vsebuje IIFE. IIFE vsebuje funkcijo, ki jo naredi dostopno tako, da jo vrne. Vse spremenljivke, deklarirane v IIFE, so zaščitene pred globalnim obsegom. Tako je metoda ( reciName ) je dostopen samo prek javne funkcije, callSayName .

Upoštevajte, da je IIFE shranjen v spremenljivko, foo . To je zato, ker brez spremenljivke, ki kaže na svojo lokacijo v pomnilniku, bodo spremenljivke po zagonu skripta nedostopne. Ta vzorec je možen zaradi zapiranje JavaScripta .

Sistem modulov CommonJS

Sistem modulov CommonJS je format modula, ki ga je definirala skupina CommonJS za reševanje težav z obsegom JavaScript z izvajanjem vsakega modula v njegovem imenskem prostoru.

Sistem modulov CommonJS deluje tako, da module prisili, da eksplicitno izvozijo spremenljivke, ki jih želijo izpostaviti drugim modulom.

Ta sistem modulov je bil ustvarjen za JavaScript na strani strežnika (Node.js) in kot taka ni privzeto podprta v brskalnikih.

Če želite implementirati module CommonJS v svoj projekt, morate najprej inicializirati NPM v svoji aplikaciji tako, da zaženete:

npm init -y

Spremenljivke, izvožene po sistemu modulov CommonJS, je mogoče uvoziti takole:

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

Moduli so uvoženi v CommonJS z uporabo zahtevati stavek, ki prebere datoteko JavaScript, izvede prebrano datoteko in vrne izvoz predmet. The izvoz objekt vsebuje vse razpoložljive izvoze v modulu.

Spremenljivko lahko izvozite po sistemu modula CommonJS z uporabo poimenovanih izvozov ali privzetih izvozov.

Imenovan izvoz

Poimenovani izvozi so izvozi, identificirani z imeni, ki so jim bila dodeljena. Poimenovani izvozi omogočajo več izvozov na modul, za razliko od privzetih izvozov.

Na primer:

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

V zgornjem bloku kode izvažate dve imenovani funkciji ( myExport in anotherExport ), tako da jih pritrdite na izvoz predmet.

Podobno lahko izvozite funkcije takole:

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

V zgornjem bloku kode nastavite izvoz nasprotuje imenovanim funkcijam. Dodelite lahko le izvoz objekt na nov predmet prek modul predmet.

Vaša koda bi povzročila napako, če bi to poskušali narediti na ta način:

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

Imenovane izvoze lahko uvozite na dva načina:

1. Uvozite vse izvoze kot en sam objekt in dostopajte do njih ločeno z uporabo zapis pike .

Na primer:

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

2. Destrukturirati izvoz iz izvoz predmet.

Na primer:

kje je odložišče v telefonu 
//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Ena stvar je skupna vsem metodam uvoza, uvoziti jih je treba z istimi imeni, s katerimi so bili izvoženi.

Privzeti izvozi

Privzeti izvoz je izvoz, označen s poljubnim imenom po vaši izbiri. Na modul imate lahko samo en privzeti izvoz.

Na primer:

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

V zgornjem bloku kode izvažate razred ( Foo ) s prerazporeditvijo izvoz nasprotovati temu.

Uvažanje privzetih izvozov je podobno uvozu poimenovanih izvozov, le da lahko za njihov uvoz uporabite poljubno ime.

Na primer:

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

V zgornjem kodnem bloku je bil poimenovan privzeti izvoz Bar , čeprav lahko uporabite katero koli ime po svoji izbiri.

Sistem modulov ES6

Sistem modulov ECMAScript Harmony, popularno znan kot moduli ES6, je uradni sistem modulov JavaScript.

Module ES6 podpirajo brskalniki in strežniki, čeprav morate pred njihovo uporabo nekaj konfigurirati.

V brskalnikih morate določiti vrsto kot modul v oznaki za uvoz skripta.

takole:

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

V Node.js morate nastaviti vrsto do modul v tvojem package.json mapa.

takole:

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

Spremenljivke lahko izvozite tudi s sistemom modulov ES6 z uporabo poimenovanih izvozov ali privzetih izvozov.

Imenovan izvoz

Podobno kot poimenovani uvozi v modulih CommonJS so identificirani z imeni, ki so jim bila dodeljena, in omogočajo več izvozov na modul.

Na primer:

//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 sistemu modulov ES6 se poimenovani izvozi izvozijo tako, da se spremenljivki doda predpona izvoz ključna beseda.

Poimenovane izvoze je mogoče uvoziti v drug modul v ES6 na enak način kot CommonJS:

  • Destrukturiranje zahtevanega izvoza iz izvoz predmet.
  • Uvažanje vseh izvozov kot enega predmeta in dostop do njih ločeno z uporabo zapisa s piko.

Tukaj je primer destrukturiranja:

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

Tukaj je primer uvoza celotnega predmeta:

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

V zgornjem kodnem bloku je zvezdica ( * ) pomeni 'vse'. The kot ključna beseda dodeli izvoz nasprotuje nizu, ki mu sledi, v tem primeru foo .

Privzeti izvozi

Podobno kot privzeti izvozi v CommonJS so označeni s katerim koli imenom po vaši izbiri in imate lahko samo en privzeti izvoz na modul.

Na primer:

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

Privzeti izvozi se ustvarijo z dodajanjem privzeto ključna beseda za izvoz ključno besedo, ki ji sledi ime izvoza.

Uvažanje privzetih izvozov je podobno uvozu poimenovanih izvozov, le da lahko za njihov uvoz uporabite poljubno ime.

Na primer:

ali lahko imaš več instagram računov 
//otherModule.js 
import Bar from "./main.js";

Mešani izvozi

Standard modula ES6 vam omogoča, da imate privzete izvoze in poimenovane izvoze v enem modulu, za razliko od CommonJS.

Na primer:

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

Pomen modulov

Če kodo razdelite na module, jih ni le lažje brati, temveč jo je mogoče večkrat uporabiti in tudi vzdrževati. Zaradi modulov v JavaScriptu je tudi vaša koda manj nagnjena k napakam, saj se vsi moduli privzeto izvajajo v strogem načinu.