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裡面定義控制器的例項：

定義程式啟動的函式：

這裡就包含了響應最開始的點餐事件。包含兩個動作：點餐和重新整理介面顯示。實際的業務場景中，顧客點了菜之後會形成待制作的訂單錄入到系統併發送到後廚，廚師製作菜品。顧客的手機訂單中也能檢視到已點的菜品以及可能的製作的動態資訊。

重新整理介面的方法包含：

介面的幾塊顯示區域定義：

區分幾塊區域的樣式：

後廚製作裡面，每個食物後面會有一個完成按鈕：

單擊完成

最後，食物的監聽器就會被呼叫，並重新整理後廚、餐桌的顯示。

至此，這個點餐程式全部完成。

到此這篇關於Javascript 模擬mvc實現點餐程式案例詳解的文章就介紹到這了,更多相關js實現點餐程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！