Architekturmuster in JavaScript: Wie man im Code nicht untergeht

Warum Architektur nicht nur langweilige Diagramme sind

Stellen Sie sich vor, Sie bauen ein Haus. Sie können einfach Ziegel stapeln, Beton gießen und hoffen, dass die Konstruktion nicht einstürzt. Oder Sie können Fundament, tragende Wände und Decken planen. In der JavaScript-Entwicklung ist es dasselbe: Ohne durchdachte Architektur wird Ihr Projekt zu "Spaghetti-Code", bei dem die Änderung einer Funktion die gesamte Anwendung zerstört.

Architekturmuster sind keine trockene Theorie aus Büchern. Es sind bewährte Kampfschemata, die Ihnen helfen:

• Nicht verrückt zu werden, wenn das Projekt auf 50.000 Codezeilen anwächst.
• Bugs schnell zu finden, weil der Code in logische Blöcke unterteilt ist.
• Features hinzuzufügen, ohne Angst zu haben, etwas zu zerstören.

In diesem Artikel analysieren wir fünf Schlüsselmuster für JavaScript-Anwendungen: vom klassischen MVC bis zum modularen Ansatz. Los geht's!

MVC (Model-View-Controller): Der Urvater aller Muster

MVC ist der Goldstandard der Webentwicklung. Das Muster teilt die Anwendung in drei Schichten:

• Model — Daten und Geschäftslogik (CRUD, Validierung).
• View — die vom Benutzer gesehene Oberfläche (HTML, Rendering).
• Controller — der Vermittler: nimmt Benutzeranfragen entgegen und aktualisiert Model oder View.

So sieht das im Code aus:

// Modelclass UserModel {    constructor() {        this.users = [];    }

    addUser(user) {        this.users.push(user);    }

    getUsers() {        return this.users;    }}

// Viewclass UserView {    render(users) {        const list = document.getElementById('user-list');        list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');    }}

// Controllerclass UserController {    constructor(model, view) {        this.model = model;        this.view = view;    }

    addUser(name) {        this.model.addUser({ name, id: Date.now() });        this.view.render(this.model.getUsers());    }}

// Verwendungconst model = new UserModel();const view = new UserView();const controller = new UserController(model, view);controller.addUser('Alice');controller.addUser('Bob');

Wann MVC in JavaScript verwenden? Ideal für mittlere und große SPAs (Single-Page-Anwendungen). Aber seien Sie vorsichtig: Wenn die View stark vom Model abhängt, wird das Muster zum "Massive View Controller" – der Controller bläht sich unanständig auf.

MVP (Model-View-Presenter): Der strenge Aufseher

MVP ist eine Weiterentwicklung von MVC, bei der der Presenter die gesamte Logik zur Steuerung der View übernimmt. Im Gegensatz zu MVC ist die View in MVP eine passive "dumme" Schicht. Sie zeigt nur Daten an und leitet Ereignisse an den Presenter weiter.

// Model (dasselbe wie in MVC)class UserModel {    constructor() {        this.users = [];    }    addUser(user) { this.users.push(user); }    getUsers() { return this.users; }}

// View — passive Schnittstelleclass UserView {    constructor() {        this.list = document.getElementById('user-list');        this.addButton = document.getElementById('add-btn');    }

    bindAddUser(handler) {        this.addButton.addEventListener('click', () => {            const name = prompt('Namen eingeben:');            if (name) handler(name);        });    }

    render(users) {        this.list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');    }}

// Presenter — das Gehirn der Anwendungclass UserPresenter {    constructor(model, view) {        this.model = model;        this.view = view;        this.view.bindAddUser(this.handleAddUser.bind(this));        this.view.render(this.model.getUsers());    }

    handleAddUser(name) {        this.model.addUser({ name, id: Date.now() });        this.view.render(this.model.getUsers());