Bevezetés a JavaScript modulrendszerekbe

Bevezetés a JavaScript modulrendszerekbe

A modulok fogalma a moduláris programozási paradigmából származik. Ez a paradigma azt javasolja, hogy a szoftvereket különálló, cserélhető komponensekből, úgynevezett „modulokból” kell összeállítani oly módon, hogy a programfunkciókat önálló fájlokká bontják, amelyek külön-külön vagy egy alkalmazásban összekapcsolva működhetnek.





MAKEUSEOF A NAP VIDEÓJA

A modul egy önálló fájl, amely bizonyos funkciók megvalósítása, valamint az újrafelhasználhatóság és rendszerezés elősegítése érdekében kódot tartalmaz.



Itt ismertetjük a JavaScript alkalmazásokban használt modulrendszereket, beleértve a modulmintát, a legtöbb Node.js alkalmazásban használt CommonJS modulrendszert és az ES6 Module rendszert.





A modul minta

A natív JavaScript-modulok bevezetése előtt a modultervezési mintát modulrendszerként használták a változók és funkciók egyetlen fájlba való hatóköréhez.

Ezt azonnal meghívott függvénykifejezésekkel, közismertebb nevén IIFE-kkel valósították meg. Az IIFE egy újrafelhasználhatatlan funkció, amely létrehozása után azonnal elindul.



hogyan lehet megnyitni .nfo fájlokat

Íme az IIFE alapvető felépítése:

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

A fenti kódblokk három különböző környezetben használt IIFE-ket ír le.



Az IIFE-ket azért használták, mert a függvényen belül deklarált változók a függvényre vannak szabva, így csak a függvényen belül érhetők el, és mivel a függvények lehetővé teszik az adatok visszaadását (nyilvánosan elérhetővé téve azokat).

Például:



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

A fenti kódblokk egy példa arra, hogyan hozták létre a modulokat a natív JavaScript modulok bevezetése előtt.

A fenti kódblokk egy IIFE-t tartalmaz. Az IIFE tartalmaz egy funkciót, amelyet a visszaküldésével elérhetővé tesz. Az IIFE-ben deklarált összes változó védett a globális hatókörrel szemben. Így a módszer ( mondd Name ) csak a nyilvános funkción keresztül érhető el, callSayName .

Figyeljük meg, hogy az IIFE egy változóba van mentve, foo . Ennek az az oka, hogy a memóriabeli helyére mutató változó nélkül a változók elérhetetlenek lesznek a szkript futása után. Ez a minta miatt lehetséges JavaScript bezárások .

A CommonJS modulrendszer

A CommonJS modulrendszer a CommonJS csoport által meghatározott modulformátum a JavaScript hatókörével kapcsolatos problémák megoldására az egyes modulok névterében történő végrehajtásával.

A CommonJS modulrendszer úgy működik, hogy arra kényszeríti a modulokat, hogy kifejezetten exportálják azokat a változókat, amelyeket más moduloknak szeretnének megjeleníteni.

Ezt a modulrendszert ehhez hozták létre szerveroldali JavaScript (Node.js) és mint ilyen, alapértelmezés szerint nem támogatott a böngészőkben.

A CommonJS modulok projektben való megvalósításához először inicializálnia kell az NPM-et az alkalmazásban a következő futtatással:

npm init -y

A CommonJS modulrendszer alapján exportált változók a következőképpen importálhatók:

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

A modulok a CommonJS-be importálhatók a igényelnek utasítás, amely beolvas egy JavaScript fájlt, végrehajtja az olvasott fájlt, és visszaadja a export tárgy. Az export Az objektum tartalmazza a modulban elérhető összes exportot.

Exportálhat egy változót a CommonJS modulrendszert követve elnevezett exportok vagy alapértelmezett exportok használatával.

Export néven

A megnevezett exportok a hozzájuk rendelt nevek alapján azonosított exportok. Az elnevezett exportálások modulonként több exportálást tesznek lehetővé, ellentétben az alapértelmezett exportálásokkal.

Például:

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

A fenti kódblokkban két elnevezett függvényt exportál ( myExport és másik Export ) rögzítésével a export tárgy.

Hasonlóképpen exportálhatja a függvényeket, így:

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

A fenti kódblokkban beállítja a export objektumot a megnevezett függvényekre. Csak a export objektumot egy új objektumra a modult tárgy.

A kód hibát jelez, ha így próbálná megtenni:

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

Kétféleképpen importálhat elnevezett exportokat:

A Windows 10 nem jön ki alvó üzemmódból

1. Importálja az összes exportált anyagot egyetlen objektumként, és külön-külön érje el őket a használatával a pont jelölés .

Például:

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

2. Deformálja az exportot a export tárgy.

Például:

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

Egy dolog közös az összes importálási módban, ugyanazon a néven kell importálni, amivel exportálták.

Alapértelmezett exportálás

Az alapértelmezett exportálás egy tetszőleges névvel azonosított export. Modulonként csak egy alapértelmezett exportálása lehet.

Például:

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

A fenti kódblokkban egy osztályt exportál ( Foo ) a export tiltakozik ellene.

Az alapértelmezett exportálások importálása hasonló a megnevezett exportok importálásához, azzal a különbséggel, hogy tetszőleges nevet használhat az importálásukhoz.

Például:

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

A fenti kódblokkban az alapértelmezett export neve volt Rúd , bár tetszőleges nevet használhat.

Az ES6 modulrendszer

Az ECMAScript Harmony modulrendszer, közismertebb nevén ES6 modulok, a hivatalos JavaScript modulrendszer.

Az ES6 modulokat a böngészők és a szerverek támogatják, bár használatuk előtt szükség van egy kis konfigurációra.

A böngészőkben meg kell adni a típus mint modult a script import címkében.

Például így:

windows 10 kék képernyő memory_management 
//index.html 
<script src="./app.js" type="module"></script>

A Node.js-ben be kell állítani típus nak nek modult a tiédben package.json fájlt.

Például így:

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

Változókat exportálhat az ES6 modulrendszer használatával is, elnevezett exportok vagy alapértelmezett exportok használatával.

Export néven

Hasonlóan a CommonJS-modulok elnevezett importjaihoz, a hozzájuk rendelt nevek alapján azonosíthatók, és modulonként több exportálást is lehetővé tesznek.

Például:

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

Az ES6 modulrendszerben a nevesített exportok exportálása úgy történik, hogy a változó előtagjaként a export kulcsszó.

A megnevezett exportok importálhatók egy másik ES6 modulba a CommonJS-hez hasonlóan:

  • A szükséges exportok destrukturálása a export tárgy.
  • Az összes exportált adat importálása egyetlen objektumként, és külön elérése a pontjelöléssel.

Íme egy példa a szerkezetbontásra:

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

Íme egy példa a teljes objektum importálására:

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

A fenti kódblokkban a csillag ( * ) jelentése „minden”. Az mint kulcsszó hozzárendeli a export objektumot az őt követő karakterláncra, ebben az esetben foo .

Alapértelmezett exportálás

Hasonlóan a CommonJS alapértelmezett exportjaihoz, tetszőleges névvel azonosíthatók, és modulonként csak egy alapértelmezett exportálás lehet.

Például:

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

Az alapértelmezett exportálások a következő hozzáadásával jönnek létre alapértelmezett kulcsszó után export kulcsszó, majd az exportálás neve.

Az alapértelmezett exportálások importálása hasonló a megnevezett exportok importálásához, azzal a különbséggel, hogy tetszőleges nevet használhat az importálásukhoz.

Például:

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

Vegyes export

Az ES6 modulszabvány lehetővé teszi az alapértelmezett exportálást és a névvel ellátott exportálást is egy modulban, ellentétben a CommonJS-szel.

Például:

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

A modulok jelentősége

A kód modulokra osztása nemcsak könnyebben olvashatóvá teszi őket, hanem újrafelhasználhatóbbá és karbantarthatóbbá is teszi. A JavaScript moduljai emellett kevésbé hibázzák a kódot, mivel alapértelmezés szerint minden modul szigorú módban fut.