Felhasználói eszközök
oktatas:web:javascript:javascript_moudulok
Különbségek
A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
| Előző változat mindkét oldalon Előző változat | |||
|
oktatas:web:javascript:javascript_moudulok [2023/03/11 13:27] admin eltávolítva |
— (aktuális) | ||
|---|---|---|---|
| Sor 1: | Sor 1: | ||
| - | [[oktatas:web:javascript|< JavaScript]] | ||
| - | |||
| - | ====== JavaScript modulok ====== | ||
| - | |||
| - | * **Szerző:** Sallai András | ||
| - | * Copyright (c) Sallai András, 2021, 2022 | ||
| - | * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] | ||
| - | * Web: https://szit.hu | ||
| - | |||
| - | ===== 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: | ||
| - | |||
| - | <code javascript modules/employee.js> | ||
| - | export class Employee { | ||
| - | static create(name) { | ||
| - | return 'hello ' + name; | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Az app.js fájlban használatba vesszük a modult, az import paranccsal: | ||
| - | <code javascript app.js> | ||
| - | import { Employee } from "./modules/employee.js"; | ||
| - | |||
| - | const egy = Employee.create('Para Béla'); | ||
| - | |||
| - | console.log(egy); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Futtatás böngészőből ==== | ||
| - | |||
| - | Az index.html fájlba ezt írjuk: | ||
| - | <code html> | ||
| - | <script type="module" src="app.js"></script> | ||
| - | </code> | ||
| - | |||
| - | 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: | ||
| - | <code javascript package.json> | ||
| - | { | ||
| - | "type": "module", | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Ezzel megmondjuk, hogy ES6 modulként szeretnénk futtatni. | ||
| - | |||
| - | |||
| - | node app | ||
| - | |||
| - | <note>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. | ||
| - | </note> | ||
| - | |||
| - | ===== ES6 elnevezett függvény exportja ===== | ||
| - | |||
| - | Nulla vagy több exportált modul. | ||
| - | |||
| - | <tabbox index.html> | ||
| - | <code 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> | ||
| - | </code> | ||
| - | |||
| - | <tabbox app.js> | ||
| - | <code javascript app.js> | ||
| - | import { egy } from './modul.js'; | ||
| - | |||
| - | console.log(egy()) | ||
| - | </code> | ||
| - | |||
| - | <tabbox modul.js> | ||
| - | <code javascript modul.js> | ||
| - | export var egy = () => { | ||
| - | return 'bármi'; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | <tabbox package.json> | ||
| - | |||
| - | <code javascript package.json> | ||
| - | { | ||
| - | "scripts": { | ||
| - | "test": "echo \"Error: no test specified\" && exit 1", | ||
| - | "start": "lite-server" | ||
| - | }, | ||
| - | "devDependencies": { | ||
| - | "lite-server": "^2.6.1" | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | </tabbox> | ||
| - | |||
| - | |||
| - | 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. | ||
| - | |||
| - | <tabbox index.html> | ||
| - | <code 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> | ||
| - | </code> | ||
| - | |||
| - | <tabbox app.js> | ||
| - | |||
| - | <code javascript app.js> | ||
| - | import { Egy, Ketto} from './modul.js'; | ||
| - | |||
| - | console.log(new Egy().ker()) | ||
| - | console.log(new Ketto().csinal()) | ||
| - | </code> | ||
| - | |||
| - | <tabbox modul.js> | ||
| - | <code javascript modul.js> | ||
| - | |||
| - | export class Egy { | ||
| - | ker() { | ||
| - | return 'valami'; | ||
| - | } | ||
| - | } | ||
| - | |||
| - | export class Ketto { | ||
| - | csinal() { | ||
| - | return 'ezaz'; | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | <tabbox package.json> | ||
| - | |||
| - | <code javascript package.json> | ||
| - | { | ||
| - | "scripts": { | ||
| - | "test": "echo \"Error: no test specified\" && exit 1", | ||
| - | "start": "lite-server" | ||
| - | }, | ||
| - | "devDependencies": { | ||
| - | "lite-server": "^2.6.1" | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | </tabbox> | ||
| - | |||
| - | |||
| - | 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. | ||
| - | |||
| - | <tabbox index.html> | ||
| - | <code 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> | ||
| - | </code> | ||
| - | |||
| - | <tabbox app.js> | ||
| - | Nem használunk {} az "egy" körül: | ||
| - | <code javascript app.js> | ||
| - | import egy from './modul.js'; | ||
| - | |||
| - | console.log(egy()) | ||
| - | </code> | ||
| - | |||
| - | <tabbox modul.js> | ||
| - | Névtelen függvényt használunk: | ||
| - | <code javascript modul.js> | ||
| - | export default () => { | ||
| - | return 'bármi'; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | <tabbox package.json> | ||
| - | |||
| - | <code javascript package.json> | ||
| - | { | ||
| - | "scripts": { | ||
| - | "test": "echo \"Error: no test specified\" && exit 1", | ||
| - | "start": "lite-server" | ||
| - | }, | ||
| - | "devDependencies": { | ||
| - | "lite-server": "^2.6.1" | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | </tabbox> | ||
| - | |||
| - | 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. | ||
| - | |||
| - | <tabbox index.html> | ||
| - | <code 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> | ||
| - | </code> | ||
| - | |||
| - | <tabbox app.js> | ||
| - | Nem használunk {} az "egy" körül: | ||
| - | <code javascript app.js> | ||
| - | import egy from './modul.js'; | ||
| - | |||
| - | console.log(new egy().ker()) | ||
| - | </code> | ||
| - | |||
| - | <tabbox modul.js> | ||
| - | Névtelen osztályt használunk: | ||
| - | <code javascript modul.js> | ||
| - | export default class { | ||
| - | ker() { | ||
| - | return 'valami'; | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | <tabbox package.json> | ||
| - | |||
| - | <code javascript package.json> | ||
| - | { | ||
| - | "scripts": { | ||
| - | "test": "echo \"Error: no test specified\" && exit 1", | ||
| - | "start": "lite-server" | ||
| - | }, | ||
| - | "devDependencies": { | ||
| - | "lite-server": "^2.6.1" | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | </tabbox> | ||
| - | |||
| - | ===== Link ===== | ||
| - | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export (2022) | ||
| - | |||
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
