MVC模式是一個比較成熟的開發模式，M是指業務模型，V是指用戶界面，C則是控制器，使用MVC的目的是將M和V的實作代碼分離，從而使同一個程式可以使用不同的表現形式，其中，View的定義比較清晰，就是用戶界面，今天就來模擬使用MVC模式開發一個點餐程式，當然，只是就此案例來說明MVC在前端的實作參考，并沒有完整的實作，程式很簡單，與傳統的MVC三層架構不謀而合，
首先，先介紹一下場景：顧客進到餐館，拿著選單點餐，服務員記錄并發到后端廚房，廚師接到訂單，按照訂單的菜品去制作，制作完畢通知服務員取餐，服務員將菜品送到客戶餐桌，顧客就餐，完畢，我們看一下業務流程圖：
在這個案例中，M對應的是菜品訂單，C對應的就是服務員，V對應的就是顧客，服務員將顧客和廚師連接到一起，但是顧客并不直接與廚師溝通與接觸，服務員需要監聽菜品的完成情況，一旦完成，廚師會通知服務員取餐，并送到顧客餐桌，我們看一下最終的界面：
界面共分為4個區域：
-
選單: 顧客進到餐館的第一個動作，拿選單點菜，
-
已點：顧客點完菜，即生成點菜訂單，
-
制作：后廚根據訂單制作菜品，
-
餐桌：制作完成的菜品會被端到顧客的餐桌，
程式用H5實作，包含一個展現的頁面order.html，一個order.js，order.js包含兩個類：Food(食物類)和Controller(點餐控制器)，
選單的實作如下：
當然，得回應選單的選擇，要實作這個功能，我們還得引入食物和控制器，
首先，看一下食物類的定義：
注冊監聽器：
這里的監聽器在實際的場景中當然是指上菜員了，從程式架構角度這里是支持多個監聽器的，很多業務場景下一個資料的改變可能會影響到多個界面的更新，這個點餐程式傳入的實際就是一個回呼函式，食物制作完成則呼叫該函式更新界面顯示(上菜)，
最后，食物制作完成：
食物制作完成，輪詢監聽器，執行回呼函式，
接下來，引入點餐控制器，這可是資料和界面的紐帶(后廚和顧客)，看控制器定義：
這個控制器里面存放了顧客點的菜品，
當然了，控制器還應包括點餐：
這里的
就是傳入的回呼函式，定義如下：
另外，這個控制器應該還包含查找指定的食物：
好了，至此，order.js的全部內容已經完成，
回到頁面，我們需要在頁面的javascript里面定義控制器的實體：
定義程式啟動的函式：
這里就包含了回應最開始的點餐事件，包含兩個動作：點餐和重繪界面顯示，實際的業務場景中，顧客點了菜之后會形成待制作的訂單錄入到系統并發送到后廚，廚師制作菜品，顧客的手機訂單中也能查看到已點的菜品以及可能的制作的動態資訊，
重繪界面的方法包含：
界面的幾塊顯示區域定義：
區分幾塊區域的樣式：
后廚制作里面，每個食物后面會有一個完成按鈕：
單擊完成
最后，食物的監聽器就會被呼叫，并重繪后廚、餐桌的顯示，
至此，這個點餐程式全部完成，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/239969.html
標籤：JavaScript
上一篇：每天學一點ES6（一）開始
下一篇：js隱式型別轉換