Uvod u sustave modula u JavaScriptu

Uvod u sustave modula u JavaScriptu

Koncept modula dolazi iz paradigme modularnog programiranja. Ova paradigma predlaže da bi softver trebao biti sastavljen od zasebnih, međusobno zamjenjivih komponenti koje se nazivaju 'moduli' rastavljanjem programskih funkcija u samostalne datoteke koje mogu raditi odvojeno ili spojene u aplikaciji.





MAKEUSEOF VIDEO DANA

Modul je samostalna datoteka koja enkapsulira kod za implementaciju određene funkcionalnosti i promicanje ponovne upotrebe i organizacije.



Ovdje ćete pokriti sustave modula koji se koriste u JavaScript aplikacijama, uključujući obrazac modula, sustav modula CommonJS koji se koristi u većini aplikacija Node.js i sustav modula ES6.





Uzorak modula

Prije uvođenja izvornih JavaScript modula, obrazac dizajna modula korišten je kao sustav modula za opseg varijabli i funkcija u jednu datoteku.

Ovo je implementirano pomoću odmah pozvanih funkcijskih izraza, popularno poznatih kao IIFE. IIFE je funkcija koja se ne može ponovno koristiti i pokreće se čim se stvori.



Evo osnovne strukture IIFE-a:

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

Gornji blok koda opisuje IIFE-ove koji se koriste u tri različita konteksta.



IIFE-ovi su korišteni jer su varijable deklarirane unutar funkcije ograničene na funkciju, što ih čini dostupnima samo unutar funkcije, i zato što vam funkcije omogućuju vraćanje podataka (čime su javno dostupni).

Na primjer:



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

Gore navedeni blok koda primjer je načina na koji su moduli stvoreni prije uvođenja izvornih JavaScript modula.

Gornji blok koda sadrži IIFE. IIFE sadrži funkciju koju čini dostupnom vraćanjem. Sve varijable deklarirane u IIFE zaštićene su od globalnog opsega. Dakle, metoda ( reciName ) dostupan je samo putem javne funkcije, nazoviReciIme .

Primijetite da je IIFE spremljen u varijablu, fuj . To je zato što, bez varijable koja pokazuje na svoju lokaciju u memoriji, varijable će biti nedostupne nakon pokretanja skripte. Ovaj obrazac je moguć zbog JavaScript zatvaranja .

Sustav modula CommonJS

Sustav modula CommonJS je format modula definiran od strane grupe CommonJS za rješavanje problema opsega JavaScripta izvršavanjem svakog modula u njegovom prostoru imena.

Sustav modula CommonJS funkcionira tako da tjera module da eksplicitno izvoze varijable koje žele izložiti drugim modulima.

Ovaj sustav modula stvoren je za JavaScript na strani poslužitelja (Node.js) i kao takav nije standardno podržan u preglednicima.

Da biste implementirali CommonJS module u svoj projekt, prvo morate inicijalizirati NPM u svojoj aplikaciji pokretanjem:

npm init -y

Varijable izvezene prema sustavu modula CommonJS mogu se uvesti ovako:

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

Moduli se uvoze u CommonJS pomoću zahtijevati iskaz, koji čita JavaScript datoteku, izvršava pročitanu datoteku i vraća izvozi objekt. The izvozi objekt sadrži sve dostupne izvoze u modulu.

Varijablu možete izvesti prema sustavu modula CommonJS koristeći ili imenovane izvoze ili zadane izvoze.

Nazvan Izvoz

Imenovani izvozi su izvozi identificirani nazivima koji su im dodijeljeni. Imenovani izvozi dopuštaju višestruke izvoze po modulu, za razliku od zadanih izvoza.

Na primjer:

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

U gornjem bloku koda izvozite dvije imenovane funkcije ( mojIzvoz i anotherExport ) pričvršćujući ih na izvozi objekt.

Slično, možete izvesti funkcije na sljedeći način:

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

U gornjem bloku koda postavljate izvozi objekt na imenovane funkcije. Možete samo dodijeliti izvozi objekt na novi objekt kroz modul objekt.

Vaš bi kod izbacio pogrešku ako biste to pokušali učiniti na ovaj način:

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

Dva su načina na koje možete uvesti imenovane izvoze:

1. Uvezite sve izvoze kao jedan objekt i pristupite im zasebno pomoću notacija točka .

Na primjer:

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

2. Destrukturirati izvoz iz izvozi objekt.

Na primjer:

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

Jedna je stvar zajednička u svim metodama uvoza, moraju se uvoziti koristeći ista imena s kojima su izvezeni.

Zadani izvozi

Zadani izvoz je izvoz identificiran bilo kojim imenom po vašem izboru. Možete imati samo jedan zadani izvoz po modulu.

Na primjer:

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

U gornjem bloku koda izvozite klasu ( fuj ) preraspodjelom izvozi prigovoriti tome.

Uvoz zadanih izvoza sličan je uvozu imenovanih izvoza, osim što možete koristiti bilo koje ime po svom izboru za njihov uvoz.

Na primjer:

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

U gornjem bloku koda imenovan je zadani izvoz Bar , iako možete koristiti bilo koje ime po svom izboru.

Sustav modula ES6

Sustav modula ECMAScript Harmony, popularno poznat kao ES6 moduli, službeni je sustav JavaScript modula.

ES6 module podržavaju preglednici i poslužitelji, iako je potrebno malo konfiguracije prije njihove upotrebe.

U preglednicima morate navesti tip kao modul u oznaci uvoza skripte.

ovako:

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

U Node.js, morate postaviti tip do modul u vašem paket.json datoteka.

ovako:

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

Također možete izvesti varijable pomoću ES6 modularnog sustava koristeći ili imenovane izvoze ili zadane izvoze.

kako saznati koji je video izbrisan na youtube -u

Nazvan Izvoz

Slično imenovanim uvozima u CommonJS modulima, identificiraju se nazivima koji su im dodijeljeni i dopuštaju više izvoza po modulu.

Na primjer:

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

U sustavu modula ES6, imenovani izvozi izvoze se tako da se varijabli doda prefiks izvoz ključna riječ.

Imenovani izvozi mogu se uvesti u drugi modul u ES6 na isti način kao i CommonJS:

  • Destrukturiranje potrebnog izvoza iz izvozi objekt.
  • Uvoz svih izvoza kao jednog objekta i pristupanje njima zasebno pomoću oznake točka.

Evo primjera destrukturiranja:

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

Evo primjera uvoza cijelog objekta:

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

U gornjem bloku koda, zvjezdica ( * ) znači 'sve'. The kao ključna riječ dodjeljuje izvozi objekt na niz koji slijedi, u ovom slučaju, fuj .

Zadani izvozi

Slično zadanim izvozima u CommonJS-u, identificirani su bilo kojim imenom po vašem izboru, a možete imati samo jedan zadani izvoz po modulu.

Na primjer:

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

Zadani izvozi stvaraju se dodavanjem zadano ključna riječ nakon izvoz ključnu riječ, iza koje slijedi naziv izvoza.

Uvoz zadanih izvoza sličan je uvozu imenovanih izvoza, osim što možete koristiti bilo koje ime po svom izboru za njihov uvoz.

Na primjer:

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

Mješoviti izvoz

Standard modula ES6 omogućuje vam da imate i zadane izvoze i imenovane izvoze u jednom modulu, za razliku od CommonJS-a.

Na primjer:

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

Važnost modula

Dijeljenje koda na module ne samo da ih čini lakšim za čitanje, već ga čini višekratnim korištenjem i održavanjem. Moduli u JavaScriptu također čine vaš kod manje sklonim pogreškama jer se svi moduli prema zadanim postavkama izvršavaju u strogom načinu rada.