szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » javascript » javascript_moudulok
Nyomvonal:
oktatas:web:javascript:javascript_moudulok

Ez a dokumentum egy előző változata!

Tartalomjegyzék

< JavaScript

JavaScript modulok

Modulokról

Kétféle modult használatos

  • ES6 - böngészők számára tervezve
  • CommonJS - nem böngészők számára tervezve - NodeJS

Az ES6 modul böngészőkben is használható modul. Arról ismerhetjük fel, hogy export, import utasításokat használ:

  • export
  • import

A CommonJS szabvány felismerhető a következő utasításokról:

  • require()
  • module.exports

ES modul

Legyen egy modules könyvtár amelyben egy employee.js állományban egy Employee osztályt tartunk:

modules/employee.js
export class Employee {
    static create(name) {
        return 'hello ' + name;
    }
}

Az app.js fájlban használatba vesszük a modult, az import paranccsal:

app.js
import { Employee } from "./modules/employee.js";
 
const egy = Employee.create('Para Béla'); 
 
console.log(egy);

Futtatás böngészőből

Az index.html fájlba ezt írjuk: 

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

Vegyük észre a type attribútumot.

Futtatás node paranccsal

A futtatáshoz szükség van a package.json fájlban egy type tulajdonságra, module értékkel:

package.json
{
    "type": "module",
}

Ezzel megmondjuk, hogy ES6 modulként szeretnénk futtatni. 

node app
A package.json fájl, type tulajdonság lehetőség előtt a fájlok kiterjesztése ES6 modul esetén .mjs volt, így lehetett futtatni NodeJS-el is. NodeJS modult ezzel szemben .cjs kiterjesztéssel látták el.

ES6 elnevezett függvény exportja

Nulla vagy több exportált modul.

index.html

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Karakterlánc</h1>
 
    <script type="module" src="app.js"></script>
</body>
</html>

app.js

app.js
import { egy } from './modul.js';
 
console.log(egy())

modul.js

modul.js
export var egy = () => {
    return 'bármi';
}

package.json

package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "devDependencies": {
    "lite-server": "^2.6.1"
  }
}

Az importálás során { } párost kell használni, ebbe kell beírni az importált függvényt nevét. Az importálás módja határozza meg, hogy kell írni { } kapcsos-zárójeleket.

ES6 elnevezett osztály exportja

Nulla vagy több exportált modul.

index.html

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Karakterlánc</h1>
 
    <script type="module" src="app.js"></script>
</body>
</html>

app.js

app.js
import { Egy, Ketto} from './modul.js';
 
console.log(new Egy().ker())
console.log(new Ketto().csinal())

modul.js

modul.js
export class Egy {
    ker() {
        return 'valami';
    }
}
 
export class Ketto {
    csinal() {
        return 'ezaz';
    }
}

package.json

package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "devDependencies": {
    "lite-server": "^2.6.1"
  }
}

Az importálás során { } párost kell használni, ebbe kell beírni az importált függvényt nevét. Az importálás módja határozza meg, hogy kell írni { } kapcsoszárójeleket.

ES6 default export

Egyetlen exportált elem (modul) esetén használjuk.

index.html

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Karakterlánc</h1>
 
    <script type="module" src="app.js"></script>
</body>
</html>

app.js

Nem használunk {} az „egy” körül:

app.js
import egy from './modul.js';
 
console.log(egy())

modul.js

Névtelen függvényt használunk:

modul.js
export default () => {
    return 'bármi';
}

package.json

package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "devDependencies": {
    "lite-server": "^2.6.1"
  }
}

Ahol importáljuk a modult, az elnevezés tetszőleges, mivel a modulnak nincs neve.

ES6 default export osztállyal

Egyetlen névtelen osztály esetén használjuk.

index.html

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Karakterlánc</h1>
 
    <script type="module" src="app.js"></script>
</body>
</html>

app.js

Nem használunk {} az „egy” körül:

app.js
import egy from './modul.js';
 
console.log(new egy().ker())

modul.js

Névtelen osztályt használunk:

modul.js
export default class {
    ker() {
        return 'valami';
    }
}

package.json

package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "devDependencies": {
    "lite-server": "^2.6.1"
  }  
}
oktatas/web/javascript/javascript_moudulok.1678537667.txt.gz · Utolsó módosítás: 2023/03/11 13:27 szerkesztette: admin

Eszközök az oldalon

Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki