Javascript 模拟mvc实现点餐程序案例详解


Posted in Javascript onDecember 24, 2020

Javascript 模拟mvc实现点餐程序案例详解

MVC模式是一个比较成熟的开发模式。M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。其中,View的定义比较清晰,就是用户界面。今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现。程序很简单,与传统的MVC三层架构不谋而合。

首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,服务员将菜品送到客户餐桌,顾客就餐,完毕。我们看一下业务流程图:

Javascript 模拟mvc实现点餐程序案例详解

在这个案例中,M对应的是菜品订单,C对应的就是服务员,V对应的就是顾客。服务员将顾客和厨师连接到一起,但是顾客并不直接与厨师沟通与接触。服务员需要监听菜品的完成情况,一旦完成,厨师会通知服务员取餐,并送到顾客餐桌。我们看一下最终的界面:

Javascript 模拟mvc实现点餐程序案例详解

界面共分为4个区域:

  • 菜单: 顾客进到餐馆的第一个动作,拿菜单点菜。
  • 已点:顾客点完菜,即生成点菜订单。
  • 制作:后厨根据订单制作菜品。
  • 餐桌:制作完成的菜品会被端到顾客的餐桌。

程序用H5实现,包含一个展现的页面order.html,一个order.js。order.js包含两个类:Food(食物类)和Controller(点餐控制器)。

菜单的实现如下:

Javascript 模拟mvc实现点餐程序案例详解

当然,得响应菜单的选择,要实现这个功能,我们还得引入食物和控制器。

首先,看一下食物类的定义:

Javascript 模拟mvc实现点餐程序案例详解

注册监听器:

Javascript 模拟mvc实现点餐程序案例详解

这里的监听器在实际的场景中当然是指上菜员了,从程序架构角度这里是支持多个监听器的,很多业务场景下一个数据的改变可能会影响到多个界面的更新。这个点餐程序传入的实际就是一个回调函数,食物制作完成则调用该函数更新界面显示(上菜)。

最后,食物制作完成:

Javascript 模拟mvc实现点餐程序案例详解

食物制作完成,轮询监听器,执行回调函数。

接下来,引入点餐控制器,这可是数据和界面的纽带(后厨和顾客)。看控制器定义:

Javascript 模拟mvc实现点餐程序案例详解

这个控制器里面存放了顾客点的菜品。

当然了,控制器还应包括点餐:

Javascript 模拟mvc实现点餐程序案例详解

这里的Javascript 模拟mvc实现点餐程序案例详解就是传入的回调函数。定义如下:

Javascript 模拟mvc实现点餐程序案例详解

另外,这个控制器应该还包含查找指定的食物:

Javascript 模拟mvc实现点餐程序案例详解

好了,至此,order.js的全部内容已经完成。

Javascript 模拟mvc实现点餐程序案例详解

回到页面,我们需要在页面的javascript里面定义控制器的实例:

Javascript 模拟mvc实现点餐程序案例详解

定义程序启动的函数:

Javascript 模拟mvc实现点餐程序案例详解

这里就包含了响应最开始的点餐事件。包含两个动作:点餐和刷新界面显示。实际的业务场景中,顾客点了菜之后会形成待制作的订单录入到系统并发送到后厨,厨师制作菜品。顾客的手机订单中也能查看到已点的菜品以及可能的制作的动态信息。

刷新界面的方法包含:

Javascript 模拟mvc实现点餐程序案例详解

Javascript 模拟mvc实现点餐程序案例详解

Javascript 模拟mvc实现点餐程序案例详解

Javascript 模拟mvc实现点餐程序案例详解

Javascript 模拟mvc实现点餐程序案例详解

界面的几块显示区域定义:

Javascript 模拟mvc实现点餐程序案例详解

区分几块区域的样式:

Javascript 模拟mvc实现点餐程序案例详解

后厨制作里面,每个食物后面会有一个完成按钮:

Javascript 模拟mvc实现点餐程序案例详解

单击完成

Javascript 模拟mvc实现点餐程序案例详解

最后,食物的监听器就会被调用,并刷新后厨、餐桌的显示。

至此,这个点餐程序全部完成。

Javascript 模拟mvc实现点餐程序案例详解

到此这篇关于Javascript 模拟mvc实现点餐程序案例详解的文章就介绍到这了,更多相关js实现点餐程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
vant时间控件使用方法详解
Dec 24 #Javascript
基于Vant UI框架实现时间段选择器
Dec 24 #Javascript
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
js制作提示框插件
Dec 24 #Javascript
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
在HTML中使用JavaScript的两种方法
Dec 24 #Javascript
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
You might like
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python生成IP段的方法
2015/07/07 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
.NET程序员的数据库面试题
2012/10/10 面试题
小学教师管理制度
2014/01/18 职场文书
产品质量承诺范本
2014/03/31 职场文书
小学社团活动总结
2014/06/27 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
在人间读书笔记
2015/06/30 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Linux安装apache服务器的配置过程
2021/11/27 Servers
Redis+AOP+自定义注解实现限流
2022/06/28 Redis