النموذج والعرض والمتحكّم (MVC) — إدخال وتحديث وتصيير
نمط النموذج والعرض والمتحكّم (MVC) على لوحة تفاعلية: كيف يصل إدخال المستخدم إلى المتحكّم، ويحدّث النموذج، ثم يُصيَّر عبر العرض.
يقسّم MVC التطبيق إلى ثلاثة أجزاء بقاعدة واحدة: المتحكّم يتولّى الإدخال، والنموذج يملك الحالة والقواعد، والعرض يصيّر النموذج — ولا يمسّ العرض ولا المتحكّم الحالة مباشرة.
النموذج والعرض والمتحكّم (MVC) — إدخال وتحديث وتصيير
لوحة FlowJam التفاعلية لهذا الشرح — كل مسار وصف وسهم أعلاه جزء من مخطط QueryChart حقيقي يمكنك فتحه وتعديله.
كيف تقرأ هذا الشرح المرئي
- تابع الحلقة بالترتيب الذي ترسمه به الأسهم: من المستخدم إلى المتحكّم إلى النموذج إلى العرض ثم عوداً إلى المستخدم.
- الأعمدة الثلاثة هي الأفعال الثلاثة: يصل الإدخال، وتُحدَّث الحالة، ويُصيَّر المخرج.
- المسارات هي فصل الاهتمامات — فكل مسار يملك نوعاً واحداً من العمل، ولا يقوم مسار بعمل غيره.
الإدخال
«المستخدم يتفاعل مع الواجهة» يبدأ الحلقة، و«المتحكّم يستقبل الإدخال» هو شرطي المرور: يقرأ الفعل، ويقرّر ما الذي يعنيه، ويوجّه النموذج. ويجعل التعليق على المتحكّم القاعدة صريحة — فهو لا يحمل أي حالة بنفسه، ولهذا يستطيع التعامل مع طلبات كثيرة دون أن يتذكّر شيئاً.
التحديث
«المتحكّم يحدّث النموذج» يعبر إلى مسار النموذج، و«النموذج يحمل الحالة وقواعد العمل» هو تعريف النموذج: فهو المصدر الموثوق الوحيد للبيانات وللقواعد التي تحكمها. و«النموذج يُخطر المراقبين بالتغيّر» هو نصف الإخطار — فالنموذج لا يخبر العرض بما يرسمه، بل يعلن فقط أن شيئاً قد تغيّر، ويستطيع أي عدد من العروض أن يستمع.
التصيير
«العرض يعيد التصيير من النموذج» هو عمل العرض الوحيد: أن يقرأ النموذج ويعرضه. ويشير تعليقه إلى الانضباط الذي يمنع MVC من الانهيار — فالعرض لا يغيّر البيانات أبداً، بل يسأل ويعرض فقط. و«المستخدم يرى الواجهة المحدّثة» يغلق الدائرة عائداً إلى صف المستخدم، حيث يبدأ كل تفاعل وينتهي.
العلاقات الرئيسية والخلاصات
- المتحكّم يتولّى الإدخال؛ والنموذج يملك الحالة؛ والعرض يصيّر — ثلاث مسؤوليات وثلاثة مسارات.
- لا العرض ولا المتحكّم يكتب البيانات؛ فكل التغييرات تمرّ عبر النموذج.
- النموذج يُخطر المراقبين بدل أن يأمر العرض، فيستطيع نموذج واحد أن يقود عروضاً كثيرة.
- هذا الفصل يجعل كل جزء قابلاً للاختبار وحده — وهو العائد الأصلي لهذا النمط.
- MVC هو سلف أنماط حديثة كثيرة (MVVM وMVP والمخازن على طراز Redux)، وكلها تحافظ على الفصل نفسه.
متى تستخدم هذا الشرح المرئي
- تقديم هذا النمط لمطوّر قبل أن يقرأ توثيق أي إطار — فالمثلث هو الخريطة التي ينفّذها كل إطار.
- شرح سبب صعوبة تغيير قاعدة شيفرة: فالحالة التي تُعالَج داخل العرض مخالفة لـMVC، وهي مرئية على اللوحة.
- مقارنة MVC بالبنى الطبقية في الشرح المرئي للبنية النظيفة.
كيف تعمل
اربط إطارك بالمثلث
أعد تسمية المربعات الثلاثة بمكوّنات إطارك الفعلية — ملف التوجيه كمتحكّم، ونماذج ORM لديك كنموذج، وقوالبك كعرض — ليصبح النمط ملموساً.
أضف خطوة الموجّه
أدرج خطوة توجيه بين المستخدم والمتحكّم إن كان إطارك يملك واحدة، موصولة بالمتحكّم الذي تُرسل إليه.
أظهر عروضاً متعدّدة
أضف مربع عرض ثانياً يستمع كلاهما إلى النموذج نفسه — عرض قائمة وعرض تفصيلي — لتبيّن علاقة المراقبة التي يعتمد عليها هذا النمط.
أضف طبقة الحفظ
وسّع النموذج بخطوة قاعدة بيانات، مع ملاحظة أن النموذج يملكها وأن المتحكّم والعرض لا يمسّانها مباشرة أبداً.
الأسئلة الشائعة
ما هو MVC؟
MVC — النموذج والعرض والمتحكّم — نمط برمجي يفصل التطبيق إلى ثلاثة أجزاء: المتحكّم يتولّى الإدخال، والنموذج يملك البيانات وقواعد العمل، والعرض يصيّر النموذج. وفائدة هذا الفصل أن كل جزء يمكن تطويره واختباره بشكل مستقل، وأن النموذج نفسه يمكن أن تعرضه عروض كثيرة. وهو النمط الذي بُنيت عليه معظم أطر الويب.
لماذا يقع النموذج في مركز MVC؟
لأن النموذج هو المصدر الموثوق الوحيد. فلو استطاع كل من المتحكّم والعرض كتابة البيانات، لانحرفا وتنازعا على الحالة. وإبقاء كل التغييرات في النموذج يعني وجود مكان واحد بالضبط تسكن فيه القواعد التي تحكم البيانات، ويجعل العرض دائماً إسقاطاً لنموذج متسق. ولهذا يضع الشرح المرئي مربعي النموذج في مسار خاص بهما.
ماذا يحدث إن وضعت منطقاً داخل العرض؟
تحصل على نمط مضاد يُسمّى أحياناً «العرض السمين»: شيفرة عرض مختلطة بقواعد العمل، لا يمكن اختبارها دون تصيير، وتنحرف عن النموذج. والنقد نفسه ينطبق على متحكّم يحمل منطق عمل بدل أن يفوّضه. وانضباط MVC هو أن يبقى كل مسار في مساره — وصفوف الشرح المرئي الثلاثة المنفصلة هي هذه القاعدة وقد صارت مرئية.
ما علاقة MVC بالأطر الحديثة؟
تحافظ معظم الأطر الحديثة على المثلث بأسماء جديدة: فـMVVM يضيف طبقة نموذج-عرض، وMVP يمنح العرض عارضاً، ومكتبات إدارة الحالة مثل Redux هي في جوهرها النموذج بقاعدة إخطار أشد صرامة. وحلقة اللوحة الجوهرية — الإدخال يغيّر الحالة، والحالة تقود المخرج — هي الثابت الذي تحتفظ به كل واحدة منها.
عدّل هذا الشرح المرئي في QueryChart (FlowJam)
افتح لوحة MVC هذه نفسها كمخطط خاص بك، وأعد تسمية المربعات لتطابق إطارك، وتتبّع مسار طلبك أنت.