אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » יסודות בתכנות » תבנית עיצוב MVVM

תבנית עיצוב MVVM

רן בר-זיק אוגוסט 12, 2012 8:13 am אין תגובות

הסבר על תבנית עיצוב MVVM וכיצד משתמשים בה ב-JavaScript

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

MVVM היא תבנית עיצוב שעד לא מזמן השתמשו בה רק בדברים מיקרוסופטיים משונים (לפחות מבחינתי). אבל בזמן האחרון, נכנסו לשימוש כבד לא מעט ספריות ופריימוורקים של JavaScript שנועדו לסייע בפיתוח Single page applications מורכבות ואפליקציות נוספות שנשענות באופן כבד על JavaScript. אחת הספריות הבולטות שתופסת תאוצה בזמן האחרון – knockout.js משתמשת בתבנית עיצוב MVVM שכדאי מאד להכיר אותה אם רוצים להתחיל לעבוד עם knockout.js. במאמר הזה אני מסביר, בלי יותר מדי דוגמאות מוחשיות, על MVVM. לצורך ההסבר נעזרתי במאמר ובדיאגרמות של סער יהלום שכתב על הנושא (באנגלית). המאמר מאד מומלץ לקריאה.

MVVM משמש אותנו בעיקר בבניית אפליקציות שרצות ב-Client side. הוא דומה למדי לקונספט שמאחורי MVC אבל עם כמה שינויים משמעותיים. אני לא רוצה לעשות השוואות, אבל לא סתם קוראים לכל תבניות העיצוב האלו *MV. אם אתם מכירים אחת, תסתדרו גם עם השניה.

אז איך MVVM עובדת? אני אעזר בדיאגרמה הבאה, שאותה גנבתי מהמאמר של סער בלי בושה, על מנת להסביר:

MVVM
MVVM

זו בעצם דיאגרמה שמראה אפליקציה שמבוססת על MVVM. לאפליקציה, כמו רוב האפליקציות, יש שני צדדים – אחד (החשוב יותר) בצד הלקוח והשני בצד השרת. האפליקציה שלנו מתקשרת עם צד השרת באמצעות JSON עם web service או עם REST API. אבל מה שחשוב ומעניין יותר הוא אפליקצית ה-MVVM שיושבת בצד הלקוח.

בואו ונסקור את חלקי האפליקציה:

View

ה-View הוא בעצם HTML ו-CSS – אותו דף פשוט שעליו נבנה הכל. הדף הזה יכול להיות "סתם" HTML שאיתו ה-JavaScript מתקשר באופן לא פולשני – כמו למשל jQuery שמתקשר עם הדף – קורא וכותב באמצעות סלקטורים. אם אנו משתמשים ב-knockout.js או בדומיו, הדף הזה יכלול גם את ה-data-bind ושאר אלמנטים חשובים.
אם מה שכתבתי עד עכשיו נשמע כמו ג'יבריש, בואו ונסכם שפשוט מדובר ב-HTML + CSS 🙂

View Model

View Model זהו JavaScript שהתפקיד שלו הוא לגשר בין ה-View ל-Model (שעליו נדבר בהמשך). הוא זה שמכיל בעצם את כל הפונקציות ששואבות מידע מה-view (מפעולות שהמשתמש עשה ב-view) ומכניסות מידע ל-view.
נשמע מסובך? ממש לא! בואו ונניח שיש לנו view מאד פשוט – HTML שיש בו רק שדה input אחד. קובץ ה-JavaScript שמלווה את העמוד הוא ה-view model. התפקיד שלו הוא לקחת את הקלט שהמשתמש מכניס בשדה המסכן ולהציג אותו בפני המשתמש – זה בדיוק מה שה-view model עושה – התפקיד שלו הוא לתפקד כדבק וכמתקשר העיקרי עם ה-view.

Model

גם ה-Model כתוב ב-JavaScript, אך בניגוד ל-View Model, הוא לא מתקשר כלל עם ה-view אלא לו יהיה את התפקיד הקשור ב-BI שלנו. כמו למשל לתקשר עם השרת באמצעות JSON. לעשות חישובים מסובכים. באופן עקרוני, אנחנו לא מעלים את כל המודלים שלנו עם ה-view אלא ה-view model שלנו מעלה את המודלים לפי הצורך (אפשר למשל להשתמש ב-head.js בשביל זה).

MVVM היא תבנית עיצוב שהיא מאד אינטואיטיבית עבור אפליקציות JavaScript וגם אם לא הכרתם את תבנית העיצוב הזו (או תבנית עיצוב באופן כללי), יהיה לכם קל לבצע לה אימפלמנטציה באפליקציות שלכם. למרות שאין בעיה ליישם MVVM עם jQuery או עם Vanilla JavaScript, ישנם פריימוורקים ובראשם knockout.js שמיישמים את תבנית העיצוב הזו באופן אינהרנטי.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
תכנות

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד