# 04_ASSET_SYSTEM.md
# Asset rendszer
## Bevezetés
A CMS minden modulja tartalmazhat saját:
- CSS fájlokat
- JavaScript fájlokat
Például:
Gallery
↓
gallery.css
gallery.js
Video
↓
video.css
video.js
Popup
↓
marketing-popup.css
marketing-popup.js
Contact
↓
contact-form.css
contact-form.js
A cél az, hogy egy modulnak ne kelljen tudnia,
hogyan épül fel az oldal.
A modulnak csak azt kell jeleznie:
**"Erre a CSS-re és JS-re szükségem lesz."**
A tényleges kiírás már a Theme/Layout feladata.
---
# Miért nem írjuk ki közvetlenül?
Rossz megoldás:
```php
echo '';
```
Miért rossz?
Mert:
- a Service HTML-t ír
- nem tudjuk ellenőrizni a duplikációt
- nem tudjuk optimalizálni
- minden modul saját maga kezeli
Ez sérti a Single Responsibility elvet.
---
# A jelenlegi működés
GalleryService
↓
AssetService::addCss()
↓
AssetService::$css[]
↓
Theme Layout
↓
AssetService::css()
↓
Ugyanez JavaScript esetén.
---
# AssetService
A rendszer központi gyűjtője.
Feladata:
- CSS fájlok nyilvántartása
- JS fájlok nyilvántartása
- duplikáció megszüntetése
- HTML generálása
Nem tud semmit:
Gallery-ről
Video-ról
Popup-ról
Csak fájlneveket tárol.
---
# addCss()
```php
AssetService::addCss('gallery.css');
```
Ez NEM ír ki semmit.
Csak eltárolja:
```php
self::$css['gallery.css']='gallery.css';
```
Ezért lehet ugyanazt többször is meghívni.
---
# Miért associative array?
Nem ezt használjuk:
```php
self::$css[]=$path;
```
hanem:
```php
self::$css[$path]=$path;
```
Miért?
Mert így automatikusan nincs duplikáció.
Ha ugyanaz a modul kétszer hívja meg:
```php
AssetService::addCss('gallery.css');
AssetService::addCss('gallery.css');
```
A tömb így néz ki:
```php
[
'gallery.css'=>'gallery.css'
]
```
Nem lesz kétszer.
---
# Miért static?
Ez az egyik legfontosabb kérdés.
GalleryService:
```php
new GalleryService();
```
VideoService:
```php
new VideoService();
```
PopupService:
```php
new PopupService();
```
Mind külön objektum.
Viszont minden modulnak ugyanabba a CSS listába kell írnia.
Ezért:
```php
private static array $css=[];
```
A static tulajdonság közös.
Minden Service ugyanazt a listát módosítja.
---
# Mi történne static nélkül?
Gallery:
```php
$this->css[]
```
Video:
```php
$this->css[]
```
Popup:
```php
$this->css[]
```
Három külön lista lenne.
A Layout nem tudná őket összegyűjteni.
---
# Mikor kerül bele?
Példa.
Gallery shortcode.
```php
GalleryService::render();
```
↓
```php
AssetService::addCss('gallery.css');
```
↓
Gallery HTML
↓
Page HTML
↓
ThemeService
↓
site.php
↓
AssetService::css()
↓
---
# css()
Ez a függvény írja ki:
```html
```
Ekkor már minden modul lefutott.
Ezért ismeri az összes szükséges CSS-t.
---
# js()
Ugyanez JavaScript esetén.
```php
AssetService::js();
```
↓
```html
```
---
# Miért nem egyből?
Ha GalleryService ezt csinálná:
```php
echo '';
```
akkor a HTML közepére kerülne.
Példa:
```html
```
Ez hibás.
A CSS-nek a HEAD-ben kell lennie.
Ezért csak regisztráljuk.
---
# Miért a site.php írja ki?
A site.php az oldal váza.
Ő tudja:
HEAD
↓
BODY
↓
FOOTER
↓
JS
Ezért csak ő tudja eldönteni,
hova kerüljenek az assetek.
---
# Asset életútja
GalleryService
↓
addCss()
↓
AssetService::$css
↓
ThemeService
↓
site.php
↓
css()
↓
HTML
↓
Browser
---
# Előnyök
✓ nincs duplikáció
✓ minden modul önálló
✓ könnyű új modult írni
✓ könnyű optimalizálni
✓ egy helyen kezelhető
✓ később cache-elhető
✓ később minify is készíthető
---
# Jövőbeli fejlesztések
A jelenlegi rendszer megfelelő.
Később bővíthető:
- CSS összefűzés
- JS összefűzés
- Minify
- Version hash
- Cache
- Critical CSS
- Async JS
A modulok ebből semmit sem fognak érzékelni.
Csak továbbra is ezt hívják:
```php
AssetService::addCss();
AssetService::addJs();
```
A háttérben bármikor lecserélhető a működés.