♻️
前端 TDD(测试驱动开发)
  • README
  • 总-课程目标
  • 总-课程安排
  • Coding
    • 第一题:FizzBuzz 数字游戏
      • 什么是 FizzBuzz?
      • 任务 0:练功前的热身
      • FizzBuzz 项目剖析
      • 任务 1:TDD 初体验
      • 任务 2:先利其器
      • 任务 3:再撸一遍
      • FizzBuzz 项目总结
      • 附录 1:Jest 测试基础及要点
      • 附录 2:Testing Library 组件测试基础
    • 第二题:MarsRover 火星车
      • 任务 1:Tasking 任务分解
      • 火星车实战
      • 火星车 Tasking 任务分解
      • 任务 2:MarsRover 实战演练
      • MarsRover Coding 演示
      • 任务 3:MarsRover 练习
      • MarsRover 项目总结
    • 第三题:CommentBox 留言板
      • CommentBox 项目剖析
      • 任务 1:Cypress E2E 测试
      • 任务 2:测试驱动组件单元接口
      • 任务 3:组件级别的快速反馈
      • 任务 4:由外到内的前端 TDD
      • CommentBox 项目总结
    • 第四题:Bookshelf 魔法书架
      • Bookshelf 项目剖析
      • 任务 1:练习 API 契约测试
      • 任务 2:组件化与数据流管理
      • 任务 3:Redux 数据流测试
      • 任务 4:简化 Redux 项目结构
      • Bookshelf 项目总结
      • 附录 1:什么才是真正的 RESTful 架构?
      • 附录 2:【译】Redux 和 命令模式
      • 附录 3:【译】什么是 Flux 架构?(兼谈 DDD 和 CQRS)
    • 第五题:ShoppingCart 购物车
      • ShoppingCart 项目剖析
      • React 哲学:Thinking in React
      • 任务 1:任务分解 - 驱动组件树拆分
      • 任务 2:综合应用 - 驱动组件接口设计
      • 任务 3:综合应用 - 驱动数据流管理
      • 任务 4:综合应用 - 驱动组件样式开发
      • ShoppingCart 项目总结
由 GitBook 提供支持
在本页
  • MarsRover 火星漫游者 任务分解练习
  • 教学目的
  • 如何任务分解
  • 火星车操作任务分解
  • 以终为始进行分析
  • 进一步细化
  • 初步完成任务分解
  • 误区 忽略数据建模
  • 输入输出建模
  • 增加输入输出处理
  1. Coding
  2. 第二题:MarsRover 火星车

火星车 Tasking 任务分解

MarsRover 火星漫游者 任务分解练习

教学目的

  • 反复练习如何用测试框定需求范围

  • 反复练习如何拆解合理的任务列表

如何任务分解

请回忆一下任务分解的方法

#1 函数a
输入:
    paramX: TypeX
    bValue: TypeB <- 函数b
    cValue: TypeC <- 函数c
输出:
    aValue: TypeA
    paramY: TypeY -> 函数b
    paramZ: TypeZ -> 函数c

#2 函数b
输入:
    paramY: TypeY
输出:
    bValue: TypeB

#3 函数c
输入:
    paramZ: TypeZ
输出:
    cValue: TypeC

以上是任务分解时需要注意的数据结构,我们推荐的方式是画图,手边准备纸笔即可。

火星车操作任务分解

#1 函数marsrover: 火星漫游车
输入:# 操作指令
    commandString: String
输出:# 火星车位置和朝向
    position: String

从输入和输出的角度,我们可以将这个任务  以上述形式描述,如果画图,则如下图:

以终为始进行分析

我们先回顾一下任务需要的输出:

1 3 N

从界面  上来看是这个样子:

最终我们需要输出:火星车到坐标和方向。

以此,我们可以推导出最直接的分解步骤:

进一步细化

对于多次运动,我们进行更进一步的分解:

初步完成任务分解

这样我们初步完成了任务分解,为什么是初步呢,我们需要进一步明确每一个步骤的输入和输出。

误区 忽略数据建模

绝大部分的前端同学,任务分解到这一步就算完成了,但是在实施的时候,很容易遇到各种问题,因为容易陷入误区:忽略数据建模。这里我们从过年图中可以看出,有两个概念是反复出现的:指令,位置和朝向。

原始的输入输出数据,只是用字符串1 3 N来表示。很显然这不是一种代码易读的结构化数据,所以对核心数据进行建模,尤其是关键的输入输出数据建模,是非常重要的;这个步骤,对于 JAVA 开发来说,是必需的,但是对很多 Javascript 开发者来说,是一个需要练习的过程。

输入输出建模

//火星车输入指令结构化对象
type Command = {
    X: Number, //区域最大长度
    Y: Number, //区域最大宽度
    x: Number, //火星车初始X坐标位置
    y: Number, //火星车初始Y坐标位置
    direct: String, //火星车初始朝向
    commands: String //火星车原始移动指令
}
//火星车状态结构化对象
type Marsrover = {
  x: Number, //火星车X坐标位置
  y: Number, //火星车Y坐标位置
  direct: String, //火星车朝向
}

增加输入输出处理

最终我们形成了完整的包含输入输出处理的任务分解方案

上一页火星车实战下一页任务 2:MarsRover 实战演练

最后更新于5年前