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

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

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

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

界面共分为4个区域：

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

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

菜单的实现如下：

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

首先，看一下食物类的定义：

注册监听器：

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

最后，食物制作完成：

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

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

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

当然了，控制器还应包括点餐：

这里的就是传入的回调函数。定义如下：

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

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

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

定义程序启动的函数：

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

刷新界面的方法包含：

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

区分几块区域的样式：

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

单击完成

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

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

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

赞 (0)

相关推荐

  • 使用原生JS实现火锅点餐小程序（面向对象思想）

    使用原生JS实现火锅点餐小程序（面向对象思想）

    本次小程序采用ES6开发标准,不会的宝宝们请先学习,再来观看吧! 使用条件:使用ES6标准开发:因为采用了Bootstrap在线,所以需要联网:VSCode开发工具,在本地服务器中打开. 代码展示: Demo.html(网页),Demo.css(样式),Test01.js(菜单类),Test02.js(循环菜单),Test03.js(增,删操作) 下面进行一一展示: Demo.html(网页): <!DOCTYPE html> <html lang="en">

  • JS实现点餐自动选择框(案例分析)

    JS实现点餐自动选择框(案例分析)

    效果图: 1. 目标需求(一共两个): 1.点击上方全选/全不选选择框,实现对应功能 2.点击下方选择框,如果所有选择框同时被选中,则上方全选框自动变成勾选状态,否则是非勾选状态 2.思路分析: 1.实现上面选择框全选全不选功能,添加上面的鼠标点击事件,让下方所有选择框跟上方一样就行 2.下方选择框在点击时,使用开关思想来检查是否是全部都选择的状态 3.js实现步骤: 上方全选/全不选选择框,实现步骤 1.获取元素 var chkAll=document.getElementById('chec

  • 原生js实现随机点餐效果

    原生js实现随机点餐效果

    html: <div class="wrap"> <div id="box"> </div> <button id="start">开始</button> <button id="stop">停止</button> css: .wrap{ width: 500px; height: 400px; margin: 0 auto; text-ali

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

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

    MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用户界面.今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现.程序很简单,与传统的MVC三层架构不谋而合. 首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,

  • ASP.NET MVC模式中应用程序结构详解

    ASP.NET MVC模式中应用程序结构详解

    目录 一.App_Data 二.App_Start 三.Content 四.Controllers 五.font 六.Models 七.Scripts 八.Views 九.Web.config 1.根目录下面的Web.config文件 2.Views文件夹下面的Web.config 十.Global.asax 在上一篇文章中,讲解了一些MVC的概念,并且创建了第一个ASP.NET MVC项目,这篇文章将讲解ASP.NET MVC程序中的代码解构,新创建的MVC应用程序解构如下图所示: 一.App

  • JavaScript 使用Ckeditor+Ckfinder文件上传案例详解

    JavaScript 使用Ckeditor+Ckfinder文件上传案例详解

    目录 一.准备工作 二.解压 三.开始集成 一.准备工作 Ckeditor_4.5.7_full + Ckfinder_java_2.6.0 二.解压 1.解压ckeditor,和平常文件解压相同,正常解压即可 2.解压ckfinder,解压完成后进入ckfinder文件夹下,发现有CKFinderJava-2.6.0.war文件,继续解压. 3.注意看红框部分 三.开始集成 1.准备工作完成,将图1中的ckeditor,及图3中的ckfinder文件夹拷贝到我们自己的项目的WebContent

  • JavaScript圣杯布局与双飞翼布局实现案例详解

    JavaScript圣杯布局与双飞翼布局实现案例详解

    目录 一.圣杯布局和双飞翼布局的功能介绍 二.圣杯布局 高度如何自适应屏幕高度 圣杯布局思路 圣杯布局代码 三.双飞翼布局 双飞翼布局的思路 双飞翼布局的代码 圣杯布局和双飞翼布局的区别 四.圣杯布局和双飞翼布局面试问题 一.圣杯布局和双飞翼布局的功能介绍 圣杯布局和双飞翼布局是三栏布局中的两种布局方式,他们实现的效果是相同的,区别就是实现方法. header和footer各自占领屏幕所有宽度,高度固定: 中间的outer是一个三栏布局: 三栏布局中left和right不变,center填充其他

  • javascript验证form表单数据的案例详解

    javascript验证form表单数据的案例详解

    直接po截图和代码 下面是CheckFormDemo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证表单的案例</title> <link rel="stylesheet" type="text/css" href="../css/body.css" rel=&q

  • JavaScript定时器设置、使用与倒计时案例详解

    本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器 定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设置定时器 setTimeout(function,delay);//设置延时多少毫秒执行该函数,只执行一次,返回值是一个id setInterval(function,delay);//设置间隔多少毫米一直执行该函数,执行多次,返回值是一个id 两者的区别就在于setTimeout方式只执行一次,而

  • Spring MVC 自定义数据转换器的思路案例详解

    Spring MVC 自定义数据转换器的思路案例详解

    数据转换器是指将客户端 http 请求中的参数转换为业务方法中定义的形参,自定义表示开发者可以自主设计转换模式,HandlerAdapter 已经提供了通用的转换,比如将 String 转成 int,String 转成 double,表单数据的封装等,但是在特殊的业务场景下,HandlerAdapter 无法进行转换,就需要开发者自定义转换器. 我们需要实现 Converter 接口来协助 Spring MVC 完成数据类型的转换,下面通过两个案例来介绍如何自定义数据转换器. 案例一:客户端输入

  • JavaScript函数之call、apply以及bind方法案例详解

    总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

  • JavaScript offsetParent案例详解

    1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute  relative fixed),如果其父元素中不存在定位则offsetParent为:body元     素 2. 根据定义分别存在以下几种情况 元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null) 元素自身无fixed定位,且父元素也不存在定位,offsetPa

  • JavaScript setTimeout与setTimeinterval使用案例详解

    这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-

随机推荐