מבוא לארכיטקטורת MVC: דוגמאות מוסברות

ארכיטקטורת Model-View-Controller (MVC) היא אחת מדפוסי פיתוח התוכנה הפופולריים ביותר. ההיגיון מאחורי ארכיטקטורת MVC משתמש בעקרון העיצוב של הפרדת חששות. עיקרון זה נועד להפריד בקשה למדורים מחוזיים, כאשר כל סעיף מתייחס לנושא ספציפי ונפרד.

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

מהו הדגם?

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

עבור אפליקציה שמשתמשת בארכיטקטורת בקר MVC, נתונים הם מרכיב חיוני של פעולתו.

מהו הנוף?

התצוגה של ארכיטקטורת MVC היא ממשק המשתמש (UI) של האפליקציה שלך. ממשק המשתמש הוא מה שמשתמש רואה במכשיר שלו כשהוא מקיים אינטראקציה עם התוכנית שלך. מצב התצוגה מסתמך על הנתונים המאוחסנים באמצעות המודל.

מהו הבקר?

אתה יכול לחשוב על הבקר כעל גשר בין רכיבי הדגם והתצוגה.

כאשר משתמש מספק נתונים דרך ממשק המשתמש שלך (התצוגה), התצוגה מעבירה את הנתונים האלה לבקר. הבקר משתמש בנתונים אלה כדי לעדכן את מסד הנתונים (דרך המודל). הבקר גם שולף נתונים ממסד הנתונים (דרך המודל) ומחזיר אותם ל-View.

בנוסף להיותו ערוץ נתונים, הבקר הוא גם המוח של הפעולה. הוא מחליט איזו פעולה לבצע על אילו נתונים, ואיזה נתונים להחזיר לממשק המשתמש.

איך הכל מתחבר?

ארכיטקטורת MVC יוצרת לולאה סגורה למחצה המסתמכת על כל הרכיבים לתפקד כראוי. האיור הבא מדגים כיצד פועלת ארכיטקטורת MVC.

כפי שניתן לראות מהאיור למעלה, אפליקציית MVC מקבלת קלט ראשוני של נתונים ממשתמש דרך ממשק המשתמש. לאחר מכן, האפליקציה מעבירה את הנתונים הללו דרך הרכיבים השונים של ארכיטקטורת MVC, ובמקרים מסוימים, מבצעת מניפולציות על הנתונים הללו ברכיב הבקר.

יישום ארכיטקטורת MVC

נניח שאתה מפתח אפליקציה לתחנת דלק שרוצה ליצור תיעוד של כל הדלק שנמכר בתחנה ולעזור לדיילי הדלק בחישוב המחיר. באמצעות ארכיטקטורת MVC, תתחיל עם המודל, ואז תעבור לבקר, ואחרי שהבנת את כל ההיגיון של היישום שלך, תוכל ליישם את ה-View.

בעת יצירת מודל עבור היישום שלך, תצטרך לדעת איזה סוג של נתונים אתה רוצה לאחסן, איך אתה רוצה לאחסן את הנתונים, וכמה נגיש אתה רוצה שהנתונים האלה יהיו.

יצירת מודל היישום

//ספריית Java
יְבוּא java.io. ניתן להסדרה;
פּוּמְבֵּימעמד GasPriceModel מיישם ניתן להסדרה{
 //attributes
פְּרָטִיסטָטִיסופיארוךserialVersionUID = 1L;
פְּרָטִי string driverName;
פְּרָטִילָצוּף gasAmount;
פְּרָטִי String gasType;
פְּרָטִילָצוּף עֲלוּת;
// בנאי ברירת מחדל
פּוּמְבֵּי GasPriceModel() {
זֶה.driverName = "";
זֶה.gasAmount = 0.00f;
זֶה.gasType = "";
זֶה.cost = 0.00f;
 }
 //בנאים ראשיים
פּוּמְבֵּי GasPriceModel (שם נהג מחרוזת, לָצוּף gasAmount, String gasType, לָצוּף עלות) {
זֶה.driverName = driverName;
זֶה.gasAmount = gasAmount;
זֶה.gasType = gasType;
זֶה.cost = עלות;
 }
 //getters ו-seters המאחזרים ומבצעים מניפולציות בנתונים
פּוּמְבֵּי מחרוזת getDriverName() {
לַחֲזוֹר שם הנהג;
 }
פּוּמְבֵּיבָּטֵל setDriverName (String driverName) {
זֶה.driverName = driverName;
 }
פּוּמְבֵּילָצוּף getGasAmount() {
לַחֲזוֹר gasAmount;
 }
פּוּמְבֵּיבָּטֵל setGasAmount(לָצוּף gasAmount) {
זֶה.gasAmount = gasAmount;
 }
פּוּמְבֵּי מחרוזת getGasType() {
לַחֲזוֹר gasType;
 }
פּוּמְבֵּיבָּטֵל setGasType (String gasType) {
זֶה.gasType = gasType;
 }
פּוּמְבֵּילָצוּף getCost() {
לַחֲזוֹר עֲלוּת;
 }
פּוּמְבֵּיבָּטֵל setCost(לָצוּף עלות) {
זֶה.cost = עלות;
 }
}

יש כמה דברים שחשוב לזהות בקוד הדגם שלמעלה. הראשון הוא שהוא מיישם את הממשק להסדרה. ממשק זה מאפשר לך לשמור את המצב של כל אובייקט שנוצר באמצעות GasPriceModel class על ידי המרתו לזרם בתים. יישום ממשק Serializable אומר שאתה צריך גם ליצור מזהה גרסה, וזה מה שעושה התכונה הראשונה במחלקה שלמעלה.

קָשׁוּר: למד כיצד ליצור שיעורים ב-Java ארבע התכונות האחרות ב- GasPriceModel המחלקה חשובה באותה מידה מכיוון שהם אומרים לך מי הולך לגשת לנתונים שהמודל הזה יצור. זה גם אומר לך איזה סוג של נתונים המודל יאחסן (מחרוזות וצפים).

יצירת בקר היישומים

//ספריות ג'אווה
יְבוּא java.io. קוֹבֶץ;
יְבוּא java.io. FileNotFoundException;
יְבוּא java.io. FileOutputStream;
יְבוּא java.io. IOException;
יְבוּא java.io. ObjectOutputStream;
פּוּמְבֵּימעמד GasPriceController {
 //מחשב את עלות הגז של לקוח ומחזיר אותו
פּוּמְבֵּילָצוּף calculateCost(לָצוּף כמות, String gasType){
לָצוּף עלות = 0.00f;
סופילָצוּף דיזלמחיר = 4.925f;
סופילָצוּף premiumPrice = 5.002f;
סופילָצוּף מחיר רגיל = 4.680f;
אם (gasType == "דיזל")
 עלות = סכום * מחיר דיזל;
אם (gasType == "פרימיום")
 עלות = סכום * premiumPrice;
אם (gasType == "רגיל")
 עלות = סכום * מחיר רגיל;
לַחֲזוֹר עֲלוּת;
 }
//שומר את הנתונים מכל מכירה לקובץ באמצעות המודל
פּוּמְבֵּיבוליאני saveEntry (נתוני GasPriceModel){
לְנַסוֹת {
FileOutputStream fs = חָדָשׁ FileOutputStream(חָדָשׁ File("data.dat"), נָכוֹן);
 ObjectOutputStream OS = חָדָשׁ ObjectOutputStream (fs);
 os.writeObject (נתונים);
 os.flush();
 os.close();
לַחֲזוֹרנָכוֹן;
 } לתפוס (FileNotFoundException ה) {
 e.printStackTrace();
 } לתפוס (IOException ה) {
 e.printStackTrace();
 }
לַחֲזוֹרשֶׁקֶר;
 }
}

הבקר למעלה עושה שני דברים, הוא מבצע חישוב על הנתונים המתקבלים מהתצוגה, ומחליט אילו נתונים להחזיר. הבקר שלמעלה משתמש גם במודל היישום כדי לאחסן את האובייקטים שנוצרו מקלט התצוגה, באמצעות ה- saveEntry() שיטה.

יצירת תצוגת האפליקציה

//ספריות ג'אווה
ייבוא ​​java.awt. BorderLayout;
ייבוא ​​java.awt. GridLayout;
ייבוא ​​java.awt.event. ActionEvent;
ייבוא ​​java.awt.event. ActionListener;
ייבוא ​​javax.swing. JButton;
ייבוא ​​javax.swing. JComboBox;
ייבוא ​​javax.swing. JFrame;
ייבוא ​​javax.swing. JLabel;
ייבוא ​​javax.swing. JOptionPane;
ייבוא ​​javax.swing. JPanel;
ייבוא ​​javax.swing. JTextField;
מחלקה ציבורית GasPriceView מרחיבה את JFrame מיישמת ActionListener {
//attributes
 פרטי סטטי final long serialVersionUID = 1L;
 בקר פרטי GasPriceController;
 שם מנהל התקן JLabel פרטי;
 שם JTextField פרטי;
 פרטי JLabel gasAmount;
 כמות JTextField פרטית;
 JLabel gasType פרטי;
 JComboBox פרטי typeCombo;
 פרטי JButton btnClear;
 פרטי JButton btnSave;
 מחרוזת סופית סטטית פרטית[] סוג =
 {"דיזל", "פרימיום", "רגיל"};
//בנאי ברירת מחדל
 public GasPriceView() {
 זה (החדש GasPriceController());
 }
//בנאי ראשי שגורם לממשק המשתמש
 Public GasPriceView (בקר GasPriceController) {
super("אפליקציה למכירת גז");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400,500);
 setVisible (true);
this.controller = בקר;
configureView();
 }
//צור את ממשק המשתמש עבור היישום
 private void configureView() {
setLayout (חדש BorderLayout());
 JPanel pnl = JPanel חדש (חדש GridLayout (4,2,2,2));
driverName = new JLabel("שם הנהג:");
 pnl.add (שם מנהל התקן);
 nameField = new JTextField();
 pnl.add (nameField);
 gasAmount = new JLabel("כמות גז (גלון):");
 pnl.add (gasAmount);
 amountField = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("סוג גז:");
 pnl.add (gasType);
 typeCombo = JComboBox חדש(סוּג);
 pnl.add (typeCombo);
 btnClear = new JButton("נקה");
 pnl.add (btnClear);
 btnSave = new JButton("שמור");
 pnl.add (btnSave );
הוסף (pnl, BorderLayout. מֶרְכָּז);
ActionListener();
}
 //מאזין ללחיצה על אחד משני הכפתורים
 public void ActionListener() {
 btnClear.addActionListener (זה);
btnSave.addActionListener (זה);
 }
//מבצע פעולה אם לוחצים על כפתור ספציפי
 @עקוף
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 amountField.setText("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 string driverName = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" צריך לשלם $" + driverTotal );
GasPriceModel customer = GasPriceModel חדש (שם מנהל, gasAmount, gasType, driverTotal);
controller.saveEntry (לקוח);
 }
}
}

התצוגה שלמעלה יוצרת ממשק משתמש באמצעות ה- configureView() שיטה. לאחר מכן הוא אוסף נתונים לאחר מתרחש אירוע (באמצעות מאזין פעולה). לאחר מכן התצוגה שלמעלה שולחת את הנתונים שנאספו לבקר, אשר לאחר מכן מבצע כמה חישובים ומחזיר נתונים לתצוגה.

ביצוע אפליקציית MVC

יְבוּא java.awt. תור אירועים;
פּוּמְבֵּימעמד אפליקציה {
פּוּמְבֵּיסטָטִיבָּטֵל main (String args[]) {
 תור אירועים.להפעיל מאוחר יותר(
חָדָשׁ Runnable() {
@עקוף
פּוּמְבֵּיבָּטֵל run() { 
 GasPriceController בקר = חָדָשׁ GasPriceController(); 
חָדָשׁ GasPriceView (בקר); 
 }
 });
 }
}

ביצוע ה אפליקציה המחלקה לעיל תיצור את ממשק המשתמש הבא:

אכלוס ממשק המשתמש בנתונים הרלוונטיים ייצור את ממשק המשתמש הקופץ הבא:

אם תסתכל בצד שמאל של התמונה למעלה, תראה שהאפליקציה יצרה גם קובץ חדש בשם "data.dat." אז, אפליקציית MVC זו אוספת נתונים ממשתמש דרך ממשק משתמש (View), ששולח את הנתונים האלה ל- בקר. הבקר מבצע מניפולציות על הנתונים על ידי ביצוע כמה חישובים, ואז הוא מאחסן את הנתונים האלה בקובץ באמצעות המודל. קָשׁוּר: קלט ופלט של Java: מדריך למתחילים

קלט ופלט של Java: מדריך למתחילים

אם תסתכל מקרוב על האפליקציה שנוצרה במאמר זה, יש כמה יתרונות ברורים. חלק מהיתרונות הללו כוללים:

• מדרגיות
• בדיקת קוד קלה יותר
• יצירת קוד תמציתי יותר

אבל ארכיטקטורת MVC היא לא דפוס העיצוב השימושי היחיד שיכול לשפר את תהליך הפיתוח שלך.

כיצד ליצור קוד לשימוש חוזר ב-JavaScript באמצעות דפוסי עיצוב

הבנה כיצד להשתמש בדפוסי עיצוב תאפשר לך להשתמש בקוד לשימוש חוזר ב-JavaScript. הנה מה שאתה צריך לדעת.

קרא הבא

על הסופר