בתהליך הפיתוח של תכנות מונחה עצמים , בקר-מודל-מבט (MVC) הוא מתודולוגיה או דפוס עיצוב המסייע לך להתייחס לממשק המשתמש למודלי הנתונים הבסיסיים ביעילות ובהצלחה. במאמר זה נלמד על ארכיטקטורת MVC ברצף הבא:
אדריכלות MVC של JavaScript
בתקופה האחרונה, דפוס ה- MVC מוחל על מגוון מגוון של שפות תכנות, כולל . JavaScript מורכב ממספר מסגרות לתמיכה בארכיטקטורת MVC או בווריאציות עליה. זה מאפשר למפתחים להוסיף מבנה ליישומים שלהם בקלות וללא מאמץ רב.
MVC מורכב משלושה מרכיבים:
- דֶגֶם
- נוף
- בקר
עכשיו, בואו נמשיך ונעמיק לעומק שלושת רכיבי ה- MVC של JavaScript.
דוגמניות
מודלים משמשים לניהול הנתונים ליישום. הם לא עוסקים בממשק המשתמש או בשכבות המצגת. במקום זאת, הם מייצגים צורות נתונים ייחודיות שייתכן שיישום יידרש. כאשר מודל משתנה או מעודכן, הוא בדרך כלל יודיע למשקיפים שלו על השינוי שחל כדי שיוכלו לפעול בהתאם.
להיכשל מהר לעומת להיכשל בטוח
בואו ניקח דוגמא למודל פשטני המיושם באמצעות Backbone:
var Photo = Backbone.Model.extend ({// מאפייני ברירת מחדל לתמונות ברירת המחדל: {src: 'placeholder.jpg', כיתוב: 'תמונת ברירת מחדל', נצפה: שקר}, // ודא שלכל תמונה שנוצרה יש 'src'. אתחל: פונקציה () {this.set ({'src': this.defaults.src})}})בגלריית תמונות, הרעיון של תמונה יהיה ראוי למודל משלו, שכן הוא מייצג סוג ייחודי של נתונים ספציפיים לתחום. מודל כזה עשוי להכיל תכונות קשורות כמו כיתוב, מקור תמונה ומטא נתונים נוספים. בדוגמה שלעיל, תמונה מסוימת תאוחסן במופע של דגם.
צפיות
תצוגות הן ייצוג חזותי של מודלים המספקים תצוגה מסוננת של מצבם הנוכחי. תצוגות JavaScript משמשות לבניית ותחזוקת אלמנט DOM. תצוגה בדרך כלל מתבוננת במודל ומקבלת הודעה כאשר המודל משתנה, ומאפשרת לתצוגה לעדכן את עצמה בהתאם. לדוגמה:
var buildPhotoView = פונקציה (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// אנו משתמשים ב- ספריית תבניות כגון קו תחתון // תבנית המייצרת את ה- HTML עבור // כניסת התמונה photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('קליק', פונקציה () {photoController.handleEvent ('לחץ', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} להחזיר {showView: show, hideView: hide}}היתרון של ארכיטקטורה זו הוא שכל רכיב ממלא תפקיד נפרד משלו בהפיכת היישום לתפקוד לפי הצורך.
בקרים
בקרים מתנהגים כמו ביניים בין מודלים לתצוגות, שאחראים על עדכון המודל כאשר המשתמש מניפולציה על התצוגה. בדוגמה שלמעלה ליישום גלריית התמונות שלנו, בקר יהיה אחראי לטיפול בשינויים שהמשתמש ביצע בתצוגת העריכה עבור תמונה מסוימת, עדכון מודל תמונה ספציפי כאשר משתמש סיים לערוך.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('הרס', this.proxy (זה .remove))}, render: function () {// לטפל בתבנית this.replace ($ ('#photoTemplate'). tmpl (this.item)) להחזיר את זה}, להסיר: function () {this.el.remove () this.release ()}})דוגמה זו תספק לך דרך קלה מאוד ופשוטה לנהל שינויים בין המודל לתצוגה.
מסגרות MVC של JavaScript
בשנים האחרונות, סדרה של JavaScript MVC התפתח. כל אחת מהמסגרות הללו עוקבת אחר צורה כלשהי של תבנית MVC במטרה לעודד מפתחים לכתוב קוד JavaScript מובנה יותר. חלק מהמסגרות הן:
- backbone.js
- Ember.js
- AngularJS
- סנצ'ה
- ממשק משתמש קנדו
בכך הגענו לסוף מאמר ה- MVC של JavaScript. אני מקווה שהבנת את שלושת המרכיבים המעורבים בארכיטקטורת MVC.
עכשיו שאתה יודע על MVC JavaScript, עיין ב מאת אדוריקה. הדרכת הסמכת בניית אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו ל- Amazon Simple Storage Service (S3).
יש לך שאלה עבורנו? אנא הזכיר זאת בפרק ההערות של 'JavaScript MVC' ונחזור אליך.
תפקידים ואחריות של מנהל מערכת לינוקס