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 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP中对数据库操作的封装
2006/10/09 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python中count函数简单用法
2020/01/05 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
基于keras中的回调函数用法说明
2020/06/17 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
质检部经理岗位职责
2014/02/19 职场文书
消防安全承诺书
2014/05/22 职场文书
公司授权委托书范文
2014/08/02 职场文书
逃课检讨书范文
2015/05/06 职场文书