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 相关文章推荐
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
Javascript的this用法
Jan 16 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
js canvas画布实现高斯模糊效果
Nov 27 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
Javascript之datagrid查询详解
Sep 15 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
Jquery读取URL参数小例子
2013/08/30 Javascript
jsonp原理及使用
2013/10/28 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Python脚本调试工具安装过程
2021/01/11 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
生育关怀行动实施方案
2014/03/26 职场文书
天网工程实施方案
2014/03/26 职场文书
青春无悔演讲稿
2014/05/08 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
运动会方队口号
2014/06/07 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
活着观后感
2015/06/03 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
关于使用Redisson订阅数问题
2022/01/18 Redis
Hive常用日期格式转换语法
2022/06/25 数据库
MySQL数据库查询之多表查询总结
2022/08/05 MySQL