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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
豆瓣网的jquery代码实例
Jun 15 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP可变函数学习小结
2015/11/29 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Django数据库操作之save与update的使用
2020/04/01 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
七年级历史教学反思
2014/02/05 职场文书
社区工作者感言
2014/03/02 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
日语专业求职信
2014/07/04 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
教师节晚会主持词
2015/06/30 职场文书