ما هي بنية JavaScript MVC وكيف تعمل؟



وحدة التحكم في عرض النموذج هي اسم منهجية لربط واجهة المستخدم بنماذج البيانات الأساسية. اقرأ لفهم JavaScript MVC.

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

هندسة JavaScript MVC

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





MVC - JavaScript MVC - edureka

يتكون MVC من ثلاثة مكونات:



  • نموذج
  • رأي
  • مراقب

الآن ، دعنا ننتقل إلى عمق هذه المكونات الثلاثة لجافا سكريبت MVC.

التجاوز مقابل التحميل الزائد في جافا

عارضات ازياء

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

لنأخذ مثالاً على نموذج مبسط تم تنفيذه باستخدام العمود الفقري:



var Photo = Backbone.Model.extend ({// السمات الافتراضية للصور الافتراضية: {src: 'placeholder.jpg'، التسمية التوضيحية: 'صورة افتراضية' ، تم عرضها: خطأ} ، // تأكد من أن كل صورة تم إنشاؤها بها `src`. initialize: function () {this.set ({'src': this.defaults.src})}})

في معرض الصور ، يستحق مفهوم الصورة نموذجها الخاص ، لأنها تمثل نوعًا فريدًا من البيانات الخاصة بالمجال. قد يحتوي هذا النموذج على سمات ذات صلة مثل التسمية التوضيحية ومصدر الصورة والبيانات الأولية الإضافية. في المثال أعلاه ، سيتم تخزين صورة معينة في مثيل للنموذج.

الآراء

المشاهدات هي تمثيل مرئي للنماذج التي توفر عرضًا مصفيًا لحالتها الحالية. تُستخدم طرق عرض JavaScript لبناء عنصر DOM والحفاظ عليه. عادةً ما يلاحظ العرض نموذجًا ويتم إخطاره عندما يتغير النموذج ، مما يسمح للعرض بتحديث نفسه وفقًا لذلك. فمثلا:

var buildPhotoView = function (photoModel، photoController) {var base = document.createElement ('div')، photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// نحن نستخدم مكتبة قوالب مثل Underscore // Templating التي تنشئ HTML لـ // إدخال الصورة photoEl.innerHTML = _.template ('#photoTemplate'، {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('click'، function () {photoController.handleEvent ('click'، photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} إرجاع {showView: show، hideView: hide}}

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

الفرق بين الامتدادات والأدوات

تحكم

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

أنواع البيانات في mysql مع أمثلة
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update'، this.proxy (this.render)) this.item.bind ('تدمير'، this.proxy (هذا .remove))}، render: function () {// Handle Templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) إرجاع هذا} ، إزالة: function () {this.el.remove () this.release ()}})

سيوفر لك هذا المثال طريقة بسيطة وخفيفة الوزن للغاية لإدارة التغييرات بين النموذج والعرض.

أطر عمل JavaScript MVC

في السنوات القليلة الماضية ، ظهرت سلسلة من JavaScript MVC تم تطويره. يتبع كل إطار من هذه الأطر شكلاً من أشكال نمط MVC بهدف تشجيع المطورين على كتابة كود JavaScript أكثر تنظيماً. بعض الأطر هي:

  • العمود الفقري. js
  • Ember.js
  • أنجولار جي إس
  • سينشا
  • Kendo UI

بهذا نكون قد وصلنا إلى نهاية مقالة JavaScript MVC. أتمنى أن تكون قد فهمت المكونات الثلاثة المتضمنة في هندسة MVC.

الآن بعد أن تعرفت على JavaScript MVC ، تحقق من ملف بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'JavaScript MVC' وسنعاود الاتصال بك.