الأنماط المعمارية في JavaScript: كيف لا تغرق في الكود

لماذا الهندسة المعمارية ليست مجرد مخططات مملة

تخيل أنك تبني منزلاً. يمكنك ببساطة تكديس الطوب، صب الخرسانة والأمل ألا ينهار الهيكل. أو يمكنك تصميم الأساس والجدران الحاملة والأسقف. في تطوير JavaScript، الأمر نفسه: بدون بنية مدروسة، يتحول مشروعك إلى "كود سباغيتي" حيث يؤدي تعديل دالة واحدة إلى كسر التطبيق بأكمله.

الأنماط المعمارية ليست نظرية جافة من الكتب. إنها مخططات قتالية مجربة ستساعدك على:

• عدم فقدان عقلك عندما ينمو المشروع إلى 50,000 سطر من الكود.
• العثور على الأخطاء بسرعة، لأن الكود مقسم إلى كتل منطقية.
• إضافة ميزات دون خوف من كسر شيء ما.

في هذه المقالة، سنحلل خمسة أنماط رئيسية لتطبيقات JavaScript: من MVC الكلاسيكي إلى النهج المعياري. هيا بنا!

MVC (Model-View-Controller): جد كل الأنماط

MVC هو المعيار الذهبي لتطوير الويب. يقسم النمط التطبيق إلى ثلاث طبقات:

• Model — البيانات ومنطق الأعمال (CRUD، التحقق من الصحة).
• View — الواجهة التي يراها المستخدم (HTML، العرض).
• Controller — الوسيط: يستقبل طلبات المستخدم ويحدث Model أو View.

إليك كيف يبدو ذلك في الكود:

// 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());    }}

// الاستخدامconst model = new UserModel();const view = new UserView();const controller = new UserController(model, view);controller.addUser('أليس');controller.addUser('بوب');

متى تستخدم MVC في JavaScript؟ مثالي للتطبيقات متوسطة وكبيرة الحجم ذات الصفحة الواحدة (SPA). لكن كن حذراً: إذا كانت View تعتمد بشدة على Model، يتحول النمط إلى "Massive View Controller" — حيث يتضخم المتحكم بشكل غير لائق.

MVP (Model-View-Presenter): المشرف الصارم

MVP هو تطور لـ MVC، حيث يتولى Presenter كل منطق إدارة View. على عكس MVC، فإن View في MVP هي طبقة سلبية "غبية". تعرض البيانات فقط وتنقل الأحداث إلى Presenter.

// Model (نفسها كما في MVC)class UserModel {    constructor() {        this.users = [];    }    addUser(user) { this.users.push(user); }    getUsers() { return this.users; }}

// View — واجهة سلبيةclass UserView {    constructor() {        this.list = document.getElementById('user-list');        this.addButton = document.getElementById('add-btn');    }

    bindAddUser(handler) {        this.addButton.addEventListener('click', () => {            const name = prompt('أدخل الاسم:');            if (name) handler(name);        });    }

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

// Presenter — عقل التطبيقclass 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());