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

利用Javascript 怎么編寫(xiě)一個(gè)點(diǎn)餐程序？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

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

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

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

在這個(gè)案例中，M對(duì)應(yīng)的是菜品訂單，C對(duì)應(yīng)的就是服務(wù)員，V對(duì)應(yīng)的就是顧客。服務(wù)員將顧客和廚師連接到一起，但是顧客并不直接與廚師溝通與接觸。服務(wù)員需要監(jiān)聽(tīng)菜品的完成情況，一旦完成，廚師會(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)的頁(yè)面order.html，一個(gè)order.js。order.js包含兩個(gè)類(lèi)：Food(食物類(lèi))和Controller(點(diǎn)餐控制器)。

菜單的實(shí)現(xiàn)如下：

當(dāng)然，得響應(yīng)菜單的選擇，要實(shí)現(xiàn)這個(gè)功能，我們還得引入食物和控制器。

首先，看一下食物類(lèi)的定義：

注冊(cè)監(jiān)聽(tīng)器：

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

最后，食物制作完成：

食物制作完成，輪詢(xún)監(jiān)聽(tīng)器，執(zhí)行回調(diào)函數(shù)。

接下來(lái)，引入點(diǎn)餐控制器，這可是數(shù)據(jù)和界面的紐帶(后廚和顧客)。看控制器定義：

這個(gè)控制器里面存放了顧客點(diǎn)的菜品。

當(dāng)然了，控制器還應(yīng)包括點(diǎn)餐：

這里的就是傳入的回調(diào)函數(shù)。定義如下：

另外，這個(gè)控制器應(yīng)該還包含查找指定的食物：

好了，至此，order.js的全部?jī)?nèi)容已經(jīng)完成。

回到頁(yè)面，我們需要在頁(yè)面的javascript里面定義控制器的實(shí)例：

定義程序啟動(dòng)的函數(shù)：

這里就包含了響應(yīng)最開(kāi)始的點(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)聽(tīng)器就會(huì)被調(diào)用，并刷新后廚、餐桌的顯示。

至此，這個(gè)點(diǎn)餐程序全部完成。

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

網(wǎng)站欄目：利用Javascript怎么編寫(xiě)一個(gè)點(diǎn)餐程序-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://muchs.cn/article22/dcodcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、移動(dòng)網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)

廣告

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