Modulių sąvoka kilusi iš modulinio programavimo paradigmos. Ši paradigma siūlo, kad programinė įranga turėtų būti sudaryta iš atskirų, keičiamų komponentų, vadinamų „modulius“, suskaidydami programos funkcijas į atskirus failus, kurie gali veikti atskirai arba sujungti taikymas.
Modulis yra atskiras failas, apimantis kodą tam tikroms funkcijoms įgyvendinti ir pakartotiniam naudojimui bei organizavimui skatinti.
Čia apžvelgsite „JavaScript“ programose naudojamas modulių sistemas, įskaitant modulių šabloną, „CommonJS“ modulių sistemą, naudojamą daugumoje „Node.js“ programų, ir „ES6 Module“ sistemą.
Modulio modelis
Prieš įvedant vietinius „JavaScript“ modulius, modulio dizaino modelis buvo naudojamas kaip modulių sistema, skirta kintamiesiems ir funkcijoms įtraukti į vieną failą.
Tai buvo įgyvendinta naudojant iš karto iškviečiamas funkcijų išraiškas, populiariai žinomas kaip IIFE. IIFE yra pakartotinai nenaudojama funkcija, kuri paleidžiama iškart, kai tik yra sukurta.
Štai pagrindinė IIFE struktūra:
(funkcija () {
//kodas čia
})();(() => {
//kodas čia
})();
(async () => {
//kodas čia
})();
Aukščiau pateiktame kodo bloke aprašomi trijuose skirtinguose kontekstuose naudojami IIFE.
IIFE buvo naudojami, nes funkcijoje deklaruoti kintamieji yra priskirti funkcijai, todėl jie yra tik pasiekiami funkcijos viduje ir todėl, kad funkcijos leidžia grąžinti duomenis (padaryti juos viešai prieinama).
Pavyzdžiui:
konst foo = (funkcija () {
konst sayName = (vardas) => {
konsolė.log('Ei, mano vardas ${name}`);
};
//Kintamųjų atskleidimas
grąžinti {
callSayName: (vardas) => pasakytiVardas (vardas),
};
})();
//Prieiga prie atvirų metodų
foo.callSayName("Baras");
Aukščiau pateiktas kodo blokas yra pavyzdys, kaip moduliai buvo sukurti prieš įvedant vietinius „JavaScript“ modulius.
Aukščiau esančiame kodo bloke yra IIFE. IIFE yra funkcija, kurią jis padaro prieinamą grąžindamas. Visi IIFE deklaruoti kintamieji yra apsaugoti nuo pasaulinės apimties. Taigi metodas (pasakytiVardas) pasiekiama tik per viešąją funkciją, callSayName.
Atkreipkite dėmesį, kad IIFE yra įrašytas į kintamąjį, foo. Taip yra todėl, kad be kintamojo, nurodančio jo vietą atmintyje, paleidus scenarijų kintamieji bus nepasiekiami. Šis modelis įmanomas dėl „JavaScript“ uždarymai.
„CommonJS“ modulių sistema
„CommonJS“ modulių sistema yra „CommonJS“ grupės apibrėžtas modulio formatas, skirtas išspręsti „JavaScript“ apimties problemas, vykdant kiekvieną modulį jo vardų erdvėje.
CommonJS modulių sistema veikia priversdama modulius aiškiai eksportuoti kintamuosius, kuriuos jie nori parodyti kitiems moduliams.
Ši modulių sistema buvo sukurta serverio pusės „JavaScript“ (Node.js) ir todėl pagal numatytuosius nustatymus naršyklėse nepalaikomas.
Norėdami įdiegti CommonJS modulius savo projekte, pirmiausia turite inicijuoti NPM savo programoje vykdydami:
npm init -y
Kintamieji, eksportuoti naudojant CommonJS modulių sistemą, gali būti importuojami taip:
//randomModule.js
//įdiegtas paketas
konst įdiegtaImportuoti = reikalauti(„paketo pavadinimas“);
//vietinis modulis
konst localImport = reikalauti("/path-to-module");
Moduliai importuojami į CommonJS naudojant reikalauti teiginys, kuris nuskaito „JavaScript“ failą, vykdo skaitymo failą ir grąžina eksportas objektas. The eksportas Objekte yra visi galimi modulio eksportai.
Galite eksportuoti kintamąjį pagal CommonJS modulių sistemą naudodami pavadintus eksportus arba numatytuosius eksportus.
Pavadinta Eksportas
Pavadintas eksportas yra eksportas, identifikuojamas pagal jiems priskirtus pavadinimus. Skirtingai nuo numatytojo eksportavimo, naudojant pavadintą eksportavimą galima kelis kartus eksportuoti vieną modulį.
Pavyzdžiui:
//main.js
eksportas.myExport = funkcija () {
konsolė.log("Tai yra pavyzdys apie a pavadintas eksportuoti");
};
eksportas.kitasEksportas = funkcija () {
konsolė.log("Tai dar vienas pavyzdys apie a pavadintas eksportuoti");
};
Aukščiau esančiame kodo bloke eksportuojate dvi pavadintas funkcijas (myExport ir Kitas Eksportas), pritvirtindami juos prie eksportas objektas.
Panašiai galite eksportuoti tokias funkcijas:
konst myExport = funkcija () {
konsolė.log("Tai yra pavyzdys apie a pavadintas eksportuoti");
};
konst otherExport = funkcija () {
konsolė.log("Tai dar vienas pavyzdys apie a pavadintas eksportuoti");
};
modulis.eksportas = {
myExport,
Kitas Eksportas,
};
Aukščiau esančiame kodo bloke nustatote eksportas prieštarauja įvardintoms funkcijoms. Galite priskirti tik eksportas objektas į naują objektą per modulis objektas.
Jūsų kodas parodys klaidą, jei bandysite tai padaryti tokiu būdu:
//Neteisingas būdas
eksportas = {
myExport,
Kitas Eksportas,
};
Įvardytus eksportus galite importuoti dviem būdais:
1. Importuokite visus eksportus kaip vieną objektą ir pasiekite juos atskirai naudodami taško žymėjimas.
Pavyzdžiui:
//otherModule.js
konst foo = reikalauti(./main“);
foo.myExport();
foo.kitas Eksportas();2. Deformuokite eksporto struktūrą iš eksportas objektas.
Pavyzdžiui:
//otherModule.js
konst { myExport, otherExport } = reikalauti(./main“);
myExport();
otherExport();
Vienas dalykas yra bendras visuose importavimo metoduose – jie turi būti importuojami tais pačiais pavadinimais, kuriais buvo eksportuojami.
Numatytasis eksportas
Numatytasis eksportavimas yra eksportavimas, pažymėtas bet kokiu jūsų pasirinktu pavadinimu. Viename modulyje galite turėti tik vieną numatytąjį eksportavimą.
Pavyzdžiui:
//main.js
klasėFoo{
baras () {
konsolė.log("Tai yra pavyzdys apie a numatytaseksportuoti");
}
}
modulis.eksportas = Foo;
Aukščiau esančiame kodo bloke eksportuojate klasę (Foo) perskirdami eksportas prieštarauti tam.
Numatytųjų eksporto failų importavimas yra panašus į eksportuojamų pavadinimu importavimą, išskyrus tai, kad galite naudoti bet kurį pasirinktą pavadinimą, kad galėtumėte juos importuoti.
Pavyzdžiui:
//otherModule.js
konst Baras = reikalauti(./main“);
konst objektas = naujas Baras ();
objektas.baras();
Aukščiau esančiame kodo bloke numatytasis eksportavimas buvo pavadintas Baras, nors galite naudoti bet kurį pasirinktą pavadinimą.
ES6 modulių sistema
ECMAScript Harmony modulių sistema, populiariai žinoma kaip ES6 moduliai, yra oficiali JavaScript modulių sistema.
ES6 modulius palaiko naršyklės ir serveriai, nors prieš naudojant juos reikia šiek tiek konfigūruoti.
Naršyklėse turite nurodyti tipo kaip modulis scenarijaus importavimo žymoje.
Kaip taip:
//index.html
<scenarijus src="./app.js" tipas ="modulis"></script>
Node.js turite nustatyti tipo į modulis tavo package.json failą.
Kaip taip:
//package.json
"tipo":"modulis"
Taip pat galite eksportuoti kintamuosius naudodami ES6 modulių sistemą naudodami pavadintus eksportus arba numatytuosius eksportus.
Pavadinta Eksportas
Panašiai kaip pavadintas importas CommonJS moduliuose, jie identifikuojami pagal jiems priskirtus pavadinimus ir leidžia kelis kartus eksportuoti vieną modulį.
Pavyzdžiui:
//main.js
eksportuotikonst myExport = funkcija () {
konsolė.log("Tai yra pavyzdys apie a pavadintas eksportuoti");
};
eksportuotikonst otherExport = funkcija () {
konsolė.log("Tai dar vienas pavyzdys apie a pavadintas eksportuoti");
};
ES6 modulių sistemoje pavadinti eksportai eksportuojami prieš kintamąjį įrašant eksportuoti raktažodį.
Pavadintus eksportus galima importuoti į kitą ES6 modulį tokiais pat būdais, kaip ir CommonJS:
- Reikalingo eksporto iš eksportas objektas.
- Importuoti visus eksportuotus elementus kaip vieną objektą ir pasiekti juos atskirai naudojant taško žymėjimą.
Čia yra destruktūrizavimo pavyzdys:
//otherModule.js
importuoti { myExport, otherExport } iš "./main.js";
mano eksportas ()
otherExport()
Štai viso objekto importavimo pavyzdys:
importuoti * kaip foo iš „./main.js“
foo.myExport()
foo.kitas Eksportas()
Aukščiau esančiame kodo bloke žvaigždutė (*) reiškia „visi“. The kaip raktinis žodis priskiria eksportas prieštarauti sekančiai eilutei, šiuo atveju foo.
Numatytasis eksportas
Panašiai kaip numatytasis CommonJS eksportavimas, jie identifikuojami bet kokiu jūsų pasirinktu pavadinimu, o vienam moduliui galite turėti tik vieną numatytąjį eksportavimą.
Pavyzdžiui:
//main.js
klasėFoo{
baras () {
konsolė.log("Tai yra pavyzdys apie a numatytaseksportuoti");
}
}
eksportuotinumatytas Foo;
Numatytasis eksportavimas sukuriamas pridedant numatytas raktinis žodis po eksportuoti raktažodį, po kurio nurodomas eksporto pavadinimas.
Numatytųjų eksporto failų importavimas yra panašus į eksportuojamų pavadinimu importavimą, išskyrus tai, kad galite naudoti bet kurį pasirinktą pavadinimą, kad galėtumėte juos importuoti.
Pavyzdžiui:
//otherModule.js
importuoti Baras iš "./main.js";
Mišrus eksportas
ES6 modulio standartas leidžia viename modulyje turėti ir numatytuosius, ir pavadintus eksportus, skirtingai nei CommonJS.
Pavyzdžiui:
//main.js
eksportuotikonst myExport = funkcija () {
konsolė.log("Tai dar vienas pavyzdys apie a pavadintas eksportuoti");
};
klasėFoo{
baras () {
konsolė.log("Tai yra pavyzdys apie a numatytaseksportuoti");
}
}
eksportuotinumatytas Foo;
Modulių svarba
Padalijus kodą į modulius, juos ne tik lengviau skaityti, bet ir lengviau naudoti pakartotinai bei prižiūrėti. „JavaScript“ moduliai taip pat sumažina kodo klaidų riziką, nes pagal numatytuosius nustatymus visi moduliai vykdomi griežtu režimu.
