Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解
MVC模式是一個(gè)比較成熟的開發(fā)模式。M是指業(yè)務(wù)模型，V是指用戶界面，C則是控制器，使用MVC的目的是將M和V的實(shí)現(xiàn)代碼分離，從而使同一個(gè)程序可以使用不同的表現(xiàn)形式。其中，View的定義比較清晰，就是用戶界面。今天就來模擬使用MVC模式開發(fā)一個(gè)點(diǎn)餐程序，當(dāng)然，只是就此案例來說明MVC在前端的實(shí)現(xiàn)參考，并沒有完整的實(shí)現(xiàn)。程序很簡單，與傳統(tǒng)的MVC三層架構(gòu)不謀而合。
首先，先介紹一下場(chǎng)景：顧客進(jìn)到餐館，拿著菜單點(diǎn)餐，服務(wù)員記錄并發(fā)到后端廚房，廚師接到訂單，按照訂單的菜品去制作，制作完畢通知服務(wù)員取餐，服務(wù)員將菜品送到客戶餐桌，顧客就餐，完畢。我們看一下業(yè)務(wù)流程圖：
在這個(gè)案例中，M對(duì)應(yīng)的是菜品訂單，C對(duì)應(yīng)的就是服務(wù)員，V對(duì)應(yīng)的就是顧客。服務(wù)員將顧客和廚師連接到一起，但是顧客并不直接與廚師溝通與接觸。服務(wù)員需要監(jiān)聽菜品的完成情況，一旦完成，廚師會(huì)通知服務(wù)員取餐，并送到顧客餐桌。我們看一下最終的界面：
界面共分為4個(gè)區(qū)域：
- 菜單: 顧客進(jìn)到餐館的第一個(gè)動(dòng)作，拿菜單點(diǎn)菜。
- 已點(diǎn)：顧客點(diǎn)完菜，即生成點(diǎn)菜訂單。
- 制作：后廚根據(jù)訂單制作菜品。
- 餐桌：制作完成的菜品會(huì)被端到顧客的餐桌。
程序用H5實(shí)現(xiàn)，包含一個(gè)展現(xiàn)的頁面order.html，一個(gè)order.js。order.js包含兩個(gè)類：Food(食物類)和Controller(點(diǎn)餐控制器)。
菜單的實(shí)現(xiàn)如下：
當(dāng)然，得響應(yīng)菜單的選擇，要實(shí)現(xiàn)這個(gè)功能，我們還得引入食物和控制器。
首先，看一下食物類的定義：
注冊(cè)監(jiān)聽器：
這里的監(jiān)聽器在實(shí)際的場(chǎng)景中當(dāng)然是指上菜員了，從程序架構(gòu)角度這里是支持多個(gè)監(jiān)聽器的，很多業(yè)務(wù)場(chǎng)景下一個(gè)數(shù)據(jù)的改變可能會(huì)影響到多個(gè)界面的更新。這個(gè)點(diǎn)餐程序傳入的實(shí)際就是一個(gè)回調(diào)函數(shù)，食物制作完成則調(diào)用該函數(shù)更新界面顯示(上菜)。
最后，食物制作完成：
食物制作完成，輪詢監(jiān)聽器，執(zhí)行回調(diào)函數(shù)。
接下來，引入點(diǎn)餐控制器，這可是數(shù)據(jù)和界面的紐帶(后廚和顧客)?？纯刂破鞫x：
這個(gè)控制器里面存放了顧客點(diǎn)的菜品。
當(dāng)然了，控制器還應(yīng)包括點(diǎn)餐：
這里的
就是傳入的回調(diào)函數(shù)。定義如下：
另外，這個(gè)控制器應(yīng)該還包含查找指定的食物：
好了，至此，order.js的全部內(nèi)容已經(jīng)完成。
回到頁面，我們需要在頁面的javascript里面定義控制器的實(shí)例：
定義程序啟動(dòng)的函數(shù)：
這里就包含了響應(yīng)最開始的點(diǎn)餐事件。包含兩個(gè)動(dòng)作：點(diǎn)餐和刷新界面顯示。實(shí)際的業(yè)務(wù)場(chǎng)景中，顧客點(diǎn)了菜之后會(huì)形成待制作的訂單錄入到系統(tǒng)并發(fā)送到后廚，廚師制作菜品。顧客的手機(jī)訂單中也能查看到已點(diǎn)的菜品以及可能的制作的動(dòng)態(tài)信息。
刷新界面的方法包含：
界面的幾塊顯示區(qū)域定義：
區(qū)分幾塊區(qū)域的樣式：
后廚制作里面，每個(gè)食物后面會(huì)有一個(gè)完成按鈕：
單擊完成
最后，食物的監(jiān)聽器就會(huì)被調(diào)用，并刷新后廚、餐桌的顯示。
至此，這個(gè)點(diǎn)餐程序全部完成。
到此這篇關(guān)于Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)點(diǎn)餐程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面，都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查，需要客服端和服務(wù)器端的校驗(yàn)的問題，本文介紹非常詳細(xì)，具有參考價(jià)值，需要的朋友可以參考下2016-06-06
踩了很多次坑,終于在微信小程序中搞定了圖片上傳以及內(nèi)容安全審核,下面這篇文章主要給大家介紹了關(guān)于微信小程序圖片上傳以及內(nèi)容安全審核的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
在寫微信小程序時(shí)，有寫到實(shí)現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實(shí)現(xiàn)。下面通過實(shí)例代碼給大家介紹微信小程序輪播圖的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2018-08-08
使用JavaScript實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了javascript 日期相減的實(shí)例講解，附上代碼供大家查看,需要的朋友可以參考下2017-08-08
javascript匿名函數(shù)應(yīng)用示例介紹
匿名函數(shù)，顧名思義就是沒有名字，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下2014-03-03
js中的觸發(fā)事件對(duì)象event.srcElement與event.target詳解
這篇文章主要給大家介紹了js中的觸發(fā)事件對(duì)象event.srcElement與event.target的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
javascript搜索自動(dòng)提示功能的實(shí)現(xiàn)
使用 jQuery(Ajax)/PHP/MySQL實(shí)現(xiàn)自動(dòng)完成功我覺得我有必要寫這個(gè)教程，因?yàn)樵?jīng)見到的大部分關(guān)于自動(dòng)完成的應(yīng)用程序都只是給你一個(gè)程序源碼包，然后告訴你怎么使用，而不是告訴你它是如何工作的以及為什么這樣做。2008-06-06
這篇文章主要介紹了js彈出確認(rèn)是否刪除對(duì)話框，具體實(shí)現(xiàn)代碼如下，需要的朋友可以參考下2014-03-03
使用UrlConnection實(shí)現(xiàn)后臺(tái)模擬http請(qǐng)求的簡單實(shí)例
這篇文章主要介紹了使用UrlConnection實(shí)現(xiàn)后臺(tái)模擬http請(qǐng)求的簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01