百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第四十七天到第四十九天:开一家餐厅吧(三)

进阶

人数92人在学习该课程,有66人已经完成该课程

时间平均用时2.3

关键词JavaScript

课程概述

作业提交截止时间:09-01

第四十七天到第四十九天:开一家餐厅吧(三)

课程目标

通过今天的练习,来继续深入练习,如何通过编程中的抽象设计、封装来解决实际问题

尝试把我们提供的学习资料中的内容,运用到任务编码中

课程描述

给这个世界加上时间

需求

在真实世界中,点菜、烹饪、用餐都是需要时间的,我们给我们的餐厅加上时间的因素。

我们假设每一个时间单位是 1 秒(可配置)。

  • 点菜需要 3 个时间单位
  • 做菜的时间不一定,每个菜需要的时间不一样,所以需要在菜单的数据中添加一个字段,描述这个菜需要用的时间,比如在 1-10 个时间单位这个区间
  • 用餐时间,每个菜的用餐时间为 3 个时间单位,如果顾客点了 n 个菜,则需要 3 * n 个时间单位

我们再做一些小调整,顾客点菜不一定只点一个了,可以是多个菜

阅读

设计

我们先做一些小的调整:

  • 菜单数据增加烹饪这个菜需要的时间的字段
  • 顾客点菜的函数变成随机点多个菜

接下来,对每一个行为加上时间的因素,我们推荐使用Promise的方式,然后整个流程可以如下

  • 顾客入座,顾客开始用 3 个时间单位想要吃什么菜,时间到后 then,告诉服务员
  • 服务员告诉厨师,假设他们之间交流是不需要时间的
  • 厨师开始烹饪,每烹饪好一个菜 then 叫服务员上菜,同时开始做下一个菜,先假设上菜是不需要时间的
  • 服务员上菜后,顾客开始用餐,点的全部菜都吃完后 then 付款,同时下一个顾客入座

把餐厅运营情况可视化出来

需求

上个任务中,我们让大家通过Console.log的方式来看餐厅运营情况,这次我们需要把做一个界面来展现餐厅运营情况。

另外为了逼真,很多行为都需要耗时了,具体需求如下:

  • 需要一个数字来实时显示餐厅的现金数量
  • 用一个厨师的图片,在图片附近显示厨师的状态:空闲 或者是 在做 XXX 菜,还差多少时间做完,并在旁边显示待做的菜列表
  • 用一个服务员的图片,展示服务员的状态,顾客点菜的时候,服务员在顾客这边,厨师做菜的时候,服务员在厨师那边,上菜的时候,又到了厨师那边,服务员的移动是需要时间的,在厨师和顾客之间的单程移动需要 0.5 个时间单位,这意味着:
    • 服务员给顾客点完菜后,把点的菜送到厨师那里,需要 0.5 个时间单位
    • 厨师烹饪好菜后,服务员从厨师这里上菜到顾客那里,需要 0.5 个时间单位,然后再回到厨师那里又需要 0.5 个时间单位
    • 如果你有余力,可以做成一个动画,没有时间的话,就在时间单位到后直接改变状态(文字显示或位置均可)就行
  • 用一个顾客的图片,展示顾客的状态,点菜中(并显示还差多少时间点好),点好后,显示顾客点的菜的List及每个菜的状态(还未上,正在吃(还差多久吃完),已吃完)
  • 有一个排队的顾客 List 显示在页面中。

需要注意:

  • 厨师做好一个菜以后,叫服务员后,就可以去做下一个菜了,不需要等服务员是否开始上菜
  • 注意优化服务员的位置,尽量使得服务员在空闲的时候,去往下一个任务的起始点。比如:
    • 上菜后,如果顾客点的菜没上完,那服务员应该回到厨师那里准备上下一个菜
    • 上菜后,如果顾客点的菜上完了,则服务员应该留在顾客旁边准备收银及服务下一个顾客

提交

把代码及预览地址进行提交

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

下一个任务,我们将扩建我们的餐厅

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~