Skip to content
Kezdőlap » JavaScript modulok használata

JavaScript modulok használata

A JavaScript modulok használata lehetővé teszi, hogy a JavaScript kódot, több .js fájlba tördeljük, amik hivatkozni tudnak egymásra.

Köszönöm a képet!

Számtalan előnye lehet ennek. Gondoljunk csak bele abba, hogy nem lesz egyetlen bazi nagy JS fájlunk, hanem szépen struktúrálni tudjuk a kódot. A konstansok mehetnek külön fájlba (pl. constants.js), a függvények egy másik fájlba (pl. utils.js). Az elnevezések csak példák, teljesen mindegy minek nevezzük a fájlokat. Lényeg, hogy legyen beszédes, és tudjuk, hogy mit melyik fájlba tettünk.

Szóval a végén kapunk egy nagyon könnyen karbantartható és átlátható könyvtár és fájl rendszert.

A modulok használata sok JavaScript-es keretrendszer alapját képezi, így fontos őket megérteni. Modulokat használ például a NodeJS, a ReactJS, React Native (Figyelem! Itt a magyar nyelvű React Native fejlesztői blog!), stb.

Hogyan kezdjünk neki?

Baromi egyszerű példát hoztam. Lesz egy .js fájl, ami tartalmaz adatokat és egy függvényt. És lesz egy olyan .js fájl, ami használja a másik fájlban levő adatokat és függvényt.

Legalul van egy link a teljes működő példára is.

Az egész mini projekt mappaszerkezete így fog kinézni:

module

Az index.html

Ez van a gyökér könyvtárban. Ez a belépési pontja a „webalkalmazásnak”.

Tartalma így néz ki:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <h1 id="header">Vanilla JS Module Demo</h1>

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

A legeslegfontosabb az egészből az, ahogyan a module.js fájlt berántom. A <script> tag-el tettem és ennek használtam a type attribútumát, aminek az lett az értéke, hogy module.

Ezzel adom tudtára a böngészőben ketyegő értelmezőnek, hogy egy JavaScript modult akarok használni. Én a könnyebb értelmezhetőség kedvéért a modulnak azt a nevet adtam, hogy module.js. De ez tök mindegy. Lehetne akár kiskutya.js is.

Mielőtt még rátérnék magának a module.js fájlnak a boncolására, jöjjön az assets.js.

assets.js

Ebben a fájlban helyeztem el egy változót és egy függvényt:

export const numbers = [1,2,3,4,5,6];

export const addTwoNumbers = (a, b) => {
  return (a + b);
}

Tök egyszerű. Ahhoz, hogy az ebben a fájlban létrehozott numbers tömböt és az addTwoNumbers nyíl függvényt használhassam egy másik JS fájlban, a definíciót az export kulcsszóval kezdtem.

Vagyis külső használatra exportáltam ezt a két cuccot. A teljesség kedvéért, a numbers egy egész számokat tartalmazó tömb. A függvény pedig két számot ad össze.

module.js

Ez maga a modul, ami használja az assets.js-ben exportált cuccokat:

import { numbers, addTwoNumbers } from './assets.js';

console.log(addTwoNumbers(numbers[2], 10));

Baromi egyszerűen működik. Az import utasítással kapcsos zárójelek között, vesszővel elválasztva importáltam az assets.js-ből a tömböt és a függvényt. A from kulcsszó után sztringként kell megadni az elérési utat. Itt a „./” azt jelenti, hogy az assets.js-t ugyanabban a könyvtárban keresi, mint amiben maga a module.js is van. Ez egyébként az src könyvtár.

Az importálás után már tudom használni a numbers tömböt és az addTwoNumbers függvényt is. De nézd meg magad is, hogyan működik:

A működő példa

Ezen a linken van a teljes module projekt.

Címkék: