198 lines
3.7 KiB
Markdown
198 lines
3.7 KiB
Markdown
# 📦 Framework-Module: `state.js` & `events.js`
|
||
|
||
Diese Dokumentation beschreibt die Verwendung der globalen **State-Verwaltung** und des **Event-/Action-Dispatching** in deinem Framework.
|
||
|
||
---
|
||
|
||
## 📁 `core/state.js` – Globale Zustandsverwaltung
|
||
|
||
### 🔹 `createState(key, initialValue)`
|
||
|
||
Erzeugt einen flüchtigen (nicht-persistenten) globalen Zustand.
|
||
|
||
```js
|
||
const username = createState('username', 'Gast');
|
||
|
||
console.log(username.get()); // → "Gast"
|
||
|
||
username.set('Michael');
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `createPersistentState(key, defaultValue)`
|
||
|
||
Wie `createState`, aber mit `localStorage`-Speicherung.
|
||
|
||
```js
|
||
const theme = createPersistentState('theme', 'light');
|
||
theme.set('dark'); // Wird gespeichert
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `state.subscribe(callback)`
|
||
|
||
Reagiert auf Änderungen des Zustands.
|
||
|
||
```js
|
||
username.subscribe((val) => {
|
||
console.log('Neuer Benutzername:', val);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `bindStateToElement({ state, element, property, attributeName })`
|
||
|
||
Bindet einen State an ein DOM-Element.
|
||
|
||
```js
|
||
bindStateToElement({
|
||
state: username,
|
||
element: document.querySelector('#userDisplay'),
|
||
property: 'text'
|
||
});
|
||
```
|
||
|
||
```html
|
||
<span id="userDisplay"></span>
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `bindInputToState(inputElement, state)`
|
||
|
||
Erzeugt eine **Zwei-Wege-Bindung** zwischen Eingabefeld und State.
|
||
|
||
```js
|
||
bindInputToState(document.querySelector('#nameInput'), username);
|
||
```
|
||
|
||
```html
|
||
<input id="nameInput" type="text" />
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `initStateBindings()`
|
||
|
||
Initialisiert alle Elemente mit `data-bind-*` automatisch.
|
||
|
||
```html
|
||
<!-- Einfache Textbindung -->
|
||
<span data-bind="username"></span>
|
||
|
||
<!-- Input mit persistenter Speicherung -->
|
||
<input data-bind-input="username" data-persistent />
|
||
|
||
<!-- Attributbindung -->
|
||
<img data-bind-attr="profilePic" data-bind-attr-name="src" />
|
||
|
||
<!-- Klassenbindung -->
|
||
<div data-bind-class="themeClass"></div>
|
||
```
|
||
|
||
```js
|
||
initStateBindings(); // Einmalig in initApp() aufrufen
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `createComputedState([dependencies], computeFn)`
|
||
|
||
Leitet einen State aus anderen ab.
|
||
|
||
```js
|
||
const first = createState('first', 'Max');
|
||
const last = createState('last', 'Mustermann');
|
||
|
||
const fullName = createComputedState([first, last], (f, l) => \`\${f} \${l}\`);
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `enableUndoRedoForState(state)`
|
||
|
||
Fügt Undo/Redo-Funktionalität hinzu.
|
||
|
||
```js
|
||
const message = createState('message', '');
|
||
const history = enableUndoRedoForState(message);
|
||
|
||
history.undo();
|
||
history.redo();
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `enableStateLogging(state, label?)`
|
||
|
||
Gibt alle Änderungen in der Konsole aus.
|
||
|
||
```js
|
||
enableStateLogging(username, 'Benutzername');
|
||
```
|
||
|
||
---
|
||
|
||
## 📁 `core/events.js` – EventBus & ActionDispatcher
|
||
|
||
### 🔹 `on(eventName, callback)`
|
||
|
||
Abonniert benutzerdefinierte Events.
|
||
|
||
```js
|
||
on('user:login', user => {
|
||
console.log('Login:', user.name);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `emit(eventName, payload)`
|
||
|
||
Sendet ein Event global.
|
||
|
||
```js
|
||
emit('user:login', { name: 'Max', id: 123 });
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `registerActionListener(callback)`
|
||
|
||
Reagiert auf alle ausgelösten Aktionen.
|
||
|
||
```js
|
||
registerActionListener(({ type, payload }) => {
|
||
if (type === 'counter/increment') {
|
||
payload.state.set(payload.state.get() + 1);
|
||
}
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
### 🔹 `dispatchAction(type, payload?)`
|
||
|
||
Löst eine benannte Aktion aus.
|
||
|
||
```js
|
||
dispatchAction('counter/increment', { state: counter });
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Zusammenfassung
|
||
|
||
| Funktion | Zweck |
|
||
|----------|-------|
|
||
| `createState` / `createPersistentState` | Reaktiver globaler Zustand |
|
||
| `bindStateToElement` / `bindInputToState` | DOM-Bindings |
|
||
| `createComputedState` | Abhängiger Zustand |
|
||
| `enableUndoRedoForState` | History / Undo |
|
||
| `enableStateLogging` | Debugging |
|
||
| `on` / `emit` | Lose gekoppelte Event-Kommunikation |
|
||
| `registerActionListener` / `dispatchAction` | Zentrale Aktionssteuerung |
|