مخطط Model View Controller ليس مجرد رسم تقني؛ إنه مخطط هيكلي لتطبيقك. يوضح كيف يمكن تقسيم نظام معقد إلى ثلاثة أجزاء مميزة لكنها متصلة: النموذج (البيانات والمنطق الأساسي)، العرض (ما يراه المستخدم)، والمتحكم (وسيط الاتصال). هذا الفصل يجعل الشيفرة أكثر قابلية للتوسع والاختبار وأسهل للصيانة.¹

تفكيك نمط العمارة MVC

لجعل النمط ملموسًا، تخيّل مطعمًا.

• النموذج هو المطبخ: يحتفظ بالمكونات (البيانات) والوصفات (قواعد العمل).
• العرض هو القائمة وترتيب المائدة: يعرض الخيارات والطبق النهائي للضيف.
• المتحكم هو النادل: يأخذ الطلبات من العرض، ويطلب من النموذج تحضيرها، ويعيد النتائج إلى العرض.

هذا "فصل الاهتمامات" هو ميزة أساسية لـ MVC ويساعد الفرق على تجنّب الشيفرة المترابطة ارتباطًا وثيقًا والتي يصعب تغييرها أو اختبارها.²

عمليًا، تعمل مخططات MVC كلغة مشتركة تجمع المطورين ومديري المنتج وأصحاب المصلحة على نفس الصفحة حول كيفية عمل التطبيق. تُسهل المخططات الواضحة الاندماج وتقلل سوء الفهم بين الفرق.³

تفصيل مكونات MVC الأساسية

النموذج: عقل العملية

يدير النموذج البيانات والحالة وقواعد العمل. إنه المصدر الوحيد للحقيقة ويجب ألا يعرف أي شيء عن تفاصيل العرض مثل HTML أو CSS. تشمل مسؤولياته التحقق من الصحة، والاحتفاظ بالبيانات، وكشف العمليات التي يحتاجها بقية النظام.

العرض: وجه التطبيق

المهمة الوحيدة للعرض هي العرض. يستلم بيانات من النموذج (عادةً عبر المتحكم)، يعرض واجهة المستخدم، ويجتذب تفاعلات المستخدم. يجب ألا يغيّر العرض بيانات التطبيق مباشرة؛ بل يجب أن يخبر المتحكم بإجراءات المستخدم فقط.

المتحكم: مدير المرور

يفسر المتحكم مدخلات المستخدم، وينسق تحديثات النموذج، ويختار كيف يجب أن يستجيب العرض. حافظ على المتحكمات خفيفة: ينبغي أن تفوض العمل الثقيل إلى النماذج أو فئات الخدمة وتتفادى تضمين منطق عمل معقد.

الأدوار والمسؤوليات (مرجع سريع)

كيف يتعامل MVC مع طلب المستخدم — خطوة بخطوة

اتبع تقديم نموذج اتصال نموذجي لتشاهد MVC قيد التنفيذ:

1. يتفاعل المستخدم مع العرض (يملأ النموذج ويضغط "إرسال").
2. يُخطر العرض المتحكم بالمدخلات المجمعة.
3. يتحقق المتحكم من الصحة ويفوض المعالجة إلى النموذج.
4. يتحقق النموذج من الصحة، يحفظ البيانات، ويحدّث الحالة.
5. يعيد العرض العرض لعرض الحالة الجديدة (على سبيل المثال، تأكيد "شكرًا على رسالتك!").

هذا التدفق أحادي الاتجاه يقلل الترابط ويجعل التفكير في النظام واضحًا. يمنع إبقاء العرض يتواصل مباشرة مع النموذج اعتمادات مخفية و"شيفرة سباغيتي".²

تطبيق MVC في الشيفرة الحديثة

خلفية Node.js + Express تقليدية مع واجهة أمامية React تتوافق بسلاسة مع MVC. بنية مجلد بسيطة هي:

/project-root ├── /src │ ├── /controllers # Handles incoming requests and orchestrates responses │ ├── /models # Manages data and business rules │ └── /views_or_components # React components or server-side views

Example controller (TypeScript + Express):

// src/controllers/userController.ts
import { Request, Response } from 'express';
import { User } from '../models/userModel';

export const getUserProfile = (req: Request, res: Response) => {
  const userId = req.params.id;
  const user = User.findById(userId);

  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).send('User not found');
  }
};

Example model (conceptual):

// src/models/userModel.ts
const users = [
  { id: '1', name: 'Alex Doe', email: 'alex@example.com' },
  { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
];

export class User {
  static findById(id: string) {
    return users.find(user => user.id === id);
  }
}

React component (View):

// src/components/UserProfile.tsx
import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

تحافظ هذه البنية على تركيز كل طبقة وقابليتها للاختبار، وتساعد الفرق على توسيع قاعدة الشيفرة دون خلق تبعيات متشابكة. للمزيد عن أساسيات MVC، راجع نظرة Codecademy العامة.¹

مقارنة MVC مع أنماط تصميم أخرى

MVC نموذج كلاسيكي، لكن أحيانًا يناسب MVP أو MVVM أفضل اعتمادًا على تعقيد واجهة المستخدم وأهداف الاختبار.

• MVP (النموذج–العرض–المقدّم): يتولى المقدّم منطق العرض ويدير عرضًا سلبيًا. مناسب عندما تريد تعظيم قابلية اختبار واجهة المستخدم.
• MVVM (النموذج–العرض–عرض-النموذج): يكشف ViewModel عن بيانات وأوامر قابلة للربط؛ يرتبط العرض بها. شائع في أطر واجهات المستخدم الحديثة بفضل ربط البيانات والتحديثات التفاعلية.⁵

كل نمط يحسّن مقايضات مختلفة: الفصل والوضوح (MVC)، قابلية الاختبار (MVP)، أو تفاعلية الواجهة وتقليل الكود الروتيني (MVVM).

أخطاء MVC الشائعة وكيفية إصلاحها

حتى مع وجود مخطط MVC صحيح، قد تنحرف الفرق إلى أنماط مضادة تتراكم كلفة ديون تقنية.

المتحكمات السميكة

عندما تحتوي المتحكمات على منطق عمل أو حسابات أو عمل قاعدة بيانات مباشر، تصبح صعبة الاختبار وإعادة الاستخدام. انقل المنطق المعقد إلى النماذج أو فئات الخدمة المخصصة وحافظ على المتحكمات كمنسقين.

النماذج الضعيفة (Anemic Models)

عندما تحتفظ النماذج بالبيانات فقط دون سلوك، تتشتت قواعد العمل عبر المتحكمات والخدمات. أعد إدخال السلوك إلى النماذج واجعلها مسؤولة عن ثوابتها وعملياتها. مناقشة مارتن فاولر عن النموذج المتجرد (Anemic Domain Model) مفيدة.⁴

تجنّب ترك العرض يتحدث مباشرةً مع النموذج؛ يجب أن تتدفق جميع التفاعلات عبر المتحكم للحفاظ على فصل واضح للاهتمامات.²

الأسئلة الشائعة — أسئلة MVC الشائعة

هل لا يزال MVC ذا صلة مع أطر مثل React؟

نعم. يغطي React طبقة العرض، لكنك لا تزال بحاجة إلى مكان لحالة التطبيق وقواعد العمل (النموذج) وطريقة لربط تغييرات الحالة بواجهة المستخدم (المتحكم أو ما يعادله). فصل هذه الأدوار يمنع مكوّنات React من الانتفاخ.

ما هو أكبر خطأ ترتكبه الفرق عند اعتماد MVC؟

الخطأ الأكثر شيوعًا هو إنشاء متحكمات سميكة. اجعل المتحكمات رقيقة من خلال تفويض التحقق من الصحة ومنطق العمل إلى النماذج أو الخدمات.

كيف يساعد مخطط MVC في تعاون الفريق؟

المخطط الواضح هو مخطط مشترك. يقلل الغموض، يسرّع الاندماج، ويسمح للفرق بالعمل بشكل متوازي دون التداخل في مسؤوليات بعضهم البعض.

في Clean Code Guy، نساعد الفرق على تطبيق هذه المبادئ لبناء برمجيات تدوم. استكشف أدلتنا وخدماتنا على https://cleancodeguy.com.