利用Javascript怎么編寫一個點餐程序-創(chuàng)新互聯(lián)

利用Javascript 怎么編寫一個點餐程序？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為達日企業(yè)提供專業(yè)的做網站、成都網站建設，達日網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

MVC模式是一個比較成熟的開發(fā)模式。M是指業(yè)務模型，V是指用戶界面，C則是控制器，使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序可以使用不同的表現形式。其中，View的定義比較清晰，就是用戶界面。今天就來模擬使用MVC模式開發(fā)一個點餐程序，當然，只是就此案例來說明MVC在前端的實現參考，并沒有完整的實現。程序很簡單，與傳統(tǒng)的MVC三層架構不謀而合。

首先，先介紹一下場景：顧客進到餐館，拿著菜單點餐，服務員記錄并發(fā)到后端廚房，廚師接到訂單，按照訂單的菜品去制作，制作完畢通知服務員取餐，服務員將菜品送到客戶餐桌，顧客就餐，完畢。我們看一下業(yè)務流程圖：

在這個案例中，M對應的是菜品訂單，C對應的就是服務員，V對應的就是顧客。服務員將顧客和廚師連接到一起，但是顧客并不直接與廚師溝通與接觸。服務員需要監(jiān)聽菜品的完成情況，一旦完成，廚師會通知服務員取餐，并送到顧客餐桌。我們看一下最終的界面：

界面共分為4個區(qū)域：

• 菜單: 顧客進到餐館的第一個動作，拿菜單點菜。

• 已點：顧客點完菜，即生成點菜訂單。

• 制作：后廚根據訂單制作菜品。

• 餐桌：制作完成的菜品會被端到顧客的餐桌。

程序用H5實現，包含一個展現的頁面order.html，一個order.js。order.js包含兩個類：Food(食物類)和Controller(點餐控制器)。

菜單的實現如下：

當然，得響應菜單的選擇，要實現這個功能，我們還得引入食物和控制器。

首先，看一下食物類的定義：

注冊監(jiān)聽器：

這里的監(jiān)聽器在實際的場景中當然是指上菜員了，從程序架構角度這里是支持多個監(jiān)聽器的，很多業(yè)務場景下一個數據的改變可能會影響到多個界面的更新。這個點餐程序傳入的實際就是一個回調函數，食物制作完成則調用該函數更新界面顯示(上菜)。

最后，食物制作完成：

食物制作完成，輪詢監(jiān)聽器，執(zhí)行回調函數。

接下來，引入點餐控制器，這可是數據和界面的紐帶(后廚和顧客)。看控制器定義：

這個控制器里面存放了顧客點的菜品。

當然了，控制器還應包括點餐：

這里的就是傳入的回調函數。定義如下：

另外，這個控制器應該還包含查找指定的食物：

好了，至此，order.js的全部內容已經完成。

回到頁面，我們需要在頁面的javascript里面定義控制器的實例：

定義程序啟動的函數：

這里就包含了響應最開始的點餐事件。包含兩個動作：點餐和刷新界面顯示。實際的業(yè)務場景中，顧客點了菜之后會形成待制作的訂單錄入到系統(tǒng)并發(fā)送到后廚，廚師制作菜品。顧客的手機訂單中也能查看到已點的菜品以及可能的制作的動態(tài)信息。

刷新界面的方法包含：

界面的幾塊顯示區(qū)域定義：

區(qū)分幾塊區(qū)域的樣式：

后廚制作里面，每個食物后面會有一個完成按鈕：

單擊完成

最后，食物的監(jiān)聽器就會被調用，并刷新后廚、餐桌的顯示。

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

看完上述內容，你們掌握利用Javascript 怎么編寫一個點餐程序的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網站欄目：利用Javascript怎么編寫一個點餐程序-創(chuàng)新互聯(lián)
網站網址：http://bm7419.com/article22/dcodcc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、動態(tài)網站、全網營銷推廣、移動網站建設、用戶體驗、品牌網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)