Home-theater-designers
Moduulien käsite tulee modulaarisen ohjelmoinnin paradigmasta. Tämä paradigma ehdottaa, että ohjelmistot koostuvat erillisistä, vaihdettavista komponenteista, joita kutsutaan 'moduuleiksi' jakamalla ohjelman toiminnot erillisiksi tiedostoiksi, jotka voivat toimia erikseen tai yhdistettynä sovellukseen.
PÄIVÄN VIDEON TEKEMINEN
Moduuli on erillinen tiedosto, joka kapseloi koodia tiettyjen toimintojen toteuttamiseksi ja uudelleenkäytettävyyden ja organisoinnin edistämiseksi.
Tässä käsitellään JavaScript-sovelluksissa käytetyt moduulijärjestelmät, mukaan lukien moduulimalli, useimmissa Node.js-sovelluksissa käytetty CommonJS-moduulijärjestelmä ja ES6-moduulijärjestelmä.
Moduulimalli
Ennen alkuperäisten JavaScript-moduulien käyttöönottoa moduulien suunnittelumallia käytettiin moduulijärjestelmänä muuttujien ja funktioiden laajentamiseksi yhteen tiedostoon.
Tämä toteutettiin käyttämällä välittömästi kutsuttuja funktiolausekkeita, jotka tunnetaan yleisesti nimellä IIFE. IIFE on toiminto, jota ei voi käyttää uudelleen, ja se käynnistyy heti, kun se on luotu.
Tässä on IIFE:n perusrakenne:
(function () {
//code here
})();
(() => {
//code here
})();
(async () => {
//code here
})();
Yllä oleva koodilohko kuvaa IIFE:itä, joita käytetään kolmessa eri kontekstissa.
IIFE:itä käytettiin, koska funktion sisällä ilmoitetut muuttujat on rajattu funktioon, jolloin ne ovat käytettävissä vain funktion sisällä, ja koska funktioiden avulla voit palauttaa tietoja (jolloin ne ovat julkisesti saatavilla).
Esimerkiksi:
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");
Yllä oleva koodilohko on esimerkki moduulien luomisesta ennen alkuperäisten JavaScript-moduulien käyttöönottoa.
Yllä oleva koodilohko sisältää IIFE:n. IIFE sisältää toiminnon, jonka se tekee käytettävissä palauttamalla sen. Kaikki IIFE:ssä ilmoitetut muuttujat on suojattu globaalilta laajuudelta. Näin ollen menetelmä ( sano Nimi ) on käytettävissä vain julkisen toiminnon kautta, callSayName .
Huomaa, että IIFE on tallennettu muuttujaan, foo . Tämä johtuu siitä, että ilman muuttujaa, joka osoittaa sen sijaintiin muistissa, muuttujat eivät ole käytettävissä komentosarjan suorittamisen jälkeen. Tämä kuvio on mahdollista johtuen JavaScriptin sulkemiset .
CommonJS-moduulijärjestelmä
CommonJS-moduulijärjestelmä on CommonJS-ryhmän määrittelemä moduulimuoto, joka ratkaisee JavaScript-laajuusongelmia suorittamalla kunkin moduulin sen nimiavaruudessa.
CommonJS-moduulijärjestelmä pakottaa moduulit eksplisiittisesti viemään muuttujia, jotka ne haluavat paljastaa muille moduuleille.
Tämä moduulijärjestelmä on luotu palvelinpuolen JavaScript (Node.js) ja sellaisenaan sitä ei tueta oletuksena selaimissa.
Jos haluat ottaa CommonJS-moduuleja projektiisi, sinun on ensin alustettava NPM sovelluksessasi suorittamalla:
npm init -y
CommonJS-moduulijärjestelmän mukaan viedyt muuttujat voidaan tuoda seuraavasti:
//randomModule.js
//installed package
const installedImport = require("package-name");
//local module
const localImport = require("/path-to-module");
Moduulit tuodaan CommonJS:ään käyttämällä vaatia lauseke, joka lukee JavaScript-tiedoston, suorittaa lukutiedoston ja palauttaa vientiä esine. The vientiä Objekti sisältää kaikki moduulissa saatavilla olevat vientitiedostot.
Voit viedä CommonJS-moduulijärjestelmää noudattavan muuttujan käyttämällä joko nimettyjä tai oletusvientejä.
nimeltä Vienti
Nimetyt viennit ovat vientiä, jotka tunnistetaan niille määritetyillä nimillä. Nimetyt viennit mahdollistavat useita vientiä moduulia kohden, toisin kuin oletusviennissä.
Esimerkiksi:
//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");
};
Yllä olevassa koodilohkossa viet kaksi nimettyä funktiota ( myExport ja otherExport ) kiinnittämällä ne vientiä esine.
Samalla tavalla voit viedä funktioita seuraavasti:
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,
};
Yllä olevassa koodilohkossa määrität vientiä vastustaa nimettyjä funktioita. Voit määrittää vain vientiä vastustaa uutta objektia kautta moduuli esine.
Koodisi antaisi virheen, jos yrität tehdä sen tällä tavalla:
//wrong way
exports = {
myExport,
anotherExport,
};
Voit tuoda nimettyjä vientituotteita kahdella tavalla:
1. Tuo kaikki viennit yhtenä objektina ja käytä niitä erikseen käyttämällä pistemerkintä .
Esimerkiksi:
//otherModule.js
const foo = require("./main");
foo.myExport();
foo.anotherExport();2. Pura viennin rakenne vientiä esine.
Esimerkiksi:
//otherModule.js
const { myExport, anotherExport } = require("./main");
myExport();
anotherExport();
Yksi asia on yhteinen kaikissa tuontitavoissa, ne on tuotava samoilla nimillä, joilla ne vietiin.
Oletusvientit
Oletusvienti on vienti, joka on merkitty millä tahansa valitsemallasi nimellä. Sinulla voi olla vain yksi oletusvienti per moduuli.
Esimerkiksi:
//main.js
class Foo {
bar() {
console.log("This is an example of a default export");
}
}
module.exports = Foo;
Yllä olevassa koodilohkossa olet viemässä luokkaa ( Foo ) määrittämällä uudelleen vientiä vastustaa sitä.
Oletusvientien tuonti on samanlaista kuin nimettyjen vientien tuonti, paitsi että voit käyttää mitä tahansa valitsemaasi nimeä niiden tuomiseen.
Esimerkiksi:
//otherModule.js
const Bar = require("./main");
const object = new Bar();
object.bar();
Yllä olevassa koodilohkossa oletusvienti oli nimetty Baari , vaikka voit käyttää mitä tahansa valitsemaasi nimeä.
ES6-moduulijärjestelmä
ECMAScript Harmony -moduulijärjestelmä, joka tunnetaan yleisesti nimellä ES6-moduulit, on virallinen JavaScript-moduulijärjestelmä.
Selaimet ja palvelimet tukevat ES6-moduuleja, mutta sinun on määritettävä hieman ennen niiden käyttöä.
Selaimissa sinun on määritettävä tyyppi kuten moduuli komentosarjan tuontitunnisteessa.
Niin kuin:
//index.html
<script src="./app.js" type="module"></script>
Node.js:ssä sinun on määritettävä tyyppi to moduuli sinun package.json tiedosto.
kuinka irrottaa ps4 -ohjain ps4: stä
Niin kuin:
//package.json
"type":"module"
Voit myös viedä muuttujia käyttämällä ES6-moduulijärjestelmää käyttämällä joko nimettyjä tai oletusvientejä.
nimeltä Vienti
Samoin kuin nimetyt tuonnit CommonJS-moduuleissa, ne tunnistetaan niille määritetyillä nimillä, ja ne sallivat useita vientiä moduulia kohden.
Esimerkiksi:
//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-moduulijärjestelmässä nimetyt viennit viedään lisäämällä muuttujan eteen viedä avainsana.
Nimetyt viennit voidaan tuoda toiseen moduuliin ES6:ssa samalla tavalla kuin CommonJS:
- Vaaditun viennin rakenteen purkaminen vientiä esine.
- Kaikkien vientien tuonti yhtenä kohteena ja niihin pääsy erikseen käyttämällä pistemerkintää.
Tässä on esimerkki rakenteen purkamisesta:
//otherModule.js
import { myExport, anotherExport } from "./main.js";
myExport()
anotherExport()
Tässä on esimerkki koko objektin tuomisesta:
import * as foo from './main.js'
foo.myExport()
foo.anotherExport()
Yllä olevassa koodilohkossa tähti ( * ) tarkoittaa 'kaikki'. The kuten avainsana määrittää vientiä vastusta sitä seuraavaa merkkijonoa, tässä tapauksessa foo .
Oletusvientit
CommonJS:n oletusvientien tapaan ne tunnistetaan millä tahansa valitsemallasi nimellä, ja sinulla voi olla vain yksi oletusvienti per moduuli.
Esimerkiksi:
//main.js
class Foo {
bar() {
console.log("This is an example of a default export");
}
}
export default Foo;
Oletusvientit luodaan lisäämällä oletuksena avainsanan jälkeen viedä avainsana, jota seuraa viennin nimi.
Oletusvientien tuonti on samanlaista kuin nimettyjen vientien tuonti, paitsi että voit käyttää mitä tahansa valitsemaasi nimeä niiden tuomiseen.
Esimerkiksi:
//otherModule.js
import Bar from "./main.js";
Sekavienti
ES6-moduulistandardi mahdollistaa sekä oletusviennin että nimetyn viennin yhdessä moduulissa, toisin kuin CommonJS.
Esimerkiksi:
//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;
Moduulien merkitys
Koodin jakaminen moduuleiksi tekee niistä helpommin luettavia, mutta myös helpommin uudelleenkäytettäviä ja huollettavia. JavaScriptin moduulit tekevät koodistasi myös vähemmän virhealttiita, koska kaikki moduulit suoritetaan oletuksena tiukassa tilassa.