“demo代码”到“产品代码”的进化之路

系统管理员 2023-09-25 17:04 17阅读 0赞

## **0 写在前面的话** ##

最近我经历了一个大型项目，项目有一个小需求，在网站首页的显要位置展示一个某活动的倒计时间。这是一个相当于入门级编程教材“作业题”难度的需求，其核心代码在10～20行之间。但是，当我们试图将这个需求做成产品时，在验收及上线阶段，产品暴露出一连串BUG，让资深的工程师都“怀疑人生”。

本文将总结这次经历，分析一段10几行代码的倒计时产品，可能踩中哪些坑；并从架构、开发和测试角度，分析如何避免这些坑引发线上问题。我们将看到，只有采取系统的软件工程方法论，通过扎实的代码设计、编码、评审、测试，“demo代码”才能进化成“产品代码”，为用户提供高质量、可信任的服务。

## **1 一句话需求** ##

这是一道基础的前端编程作业题：

*实现一个倒计时，在页面上展示距离xx活动开始的时间。*

这是某大型项目的一个产品需求：

*实现一个倒计时，在页面上展示距离xx活动开始的时间：超过48小时，展示向上取整的天数；48小时及以内，展示时分秒；活动开始后，倒计时消失。*

可以看到，倒计时产品需求，看起来并不比倒计时编程题难多少，只是加了一点限制条件，例如明确了倒计时在不同时间段展示的内容。

## **2 demo代码** ##

我们先看如何用HTML完成上面的作业题。Google搜索“HTML 倒计时”，找到2190w条结果。

![fdcc3d90f656e281cc34bae5d085c118.png][]

以w3school提供的官方学习代码为例，核心代码仅10行：

<!DOCTYPE HTML><html><head></head><body><script>
 var countDownDate = new Date("Mar 10, 2023 00:00:00").getTime();
 var x = setInterval(function() {
 var now = new Date().getTime();
 var distance = countDownDate - now;
 var days = Math.floor(distance / (1000 * 60 * 60 * 24));
 var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
 }, 1000);
 </script></body></html>

在浏览器中运行该代码，效果如下：

![5d479bb7f8ed8c79175b68d17bb5c1f7.png][]

尽管这段代码能够运行起来，但是离成为真正可用的产品，还有很大的差距。

简要来说，要想在真实场景落地，我们需要解决的问题有：

1.  *从哪里获取活动开始时间？考虑活动多样性与代码复用性，活动开始的时间应该是可配置的、可动态获取的。*
2.  *从哪里获取当前时间？是直接从浏览器本地读取时间，还是间接从其他地方读取时间？*
3.  *如何计算符合预期格式的时间差？并确保在倒计时过程中的任意时间点(anytime)，倒计时的展示都是正确的？*
4.  *如何确保在同一时间点，全球不同地区的用户(anywhere)看到的倒计时是一致的？*
5.  *如何确保不同浏览器、不同端型的任意用户(anyone)看到正确的倒计时？*

显然，要解决这些问题，上述"demo代码"需要重新设计、编码。并且，由于要解决的实际问题比作业题复杂、比想象中复杂，我们在这个过程中是容易踩坑的。

接下来，我们看一段实现上述产品需求的代码，并指出其中哪些地方可能踩中什么样的坑。

## **3 可能踩到的坑** ##

如下这段代码，其实现倒计时产品的思路如下：首先从getStartTime()接口中获取活动开始时间，然后从getCurrentTime()接口中获取当前时间，接着计算时间差，并转换为业务期望的倒计时时间格式，并在页面中展示。

<!DOCTYPE HTML><html><head></head><body><script>
 var countDownDate = new Date(getStartTime()).getTime(); //伪代码, 获取活动开始时间
 var now = getCurrentTime(); //伪代码，获取当前时间
 var x = setInterval(function() {
 var days = Math.floor(distance / (1000 * 60 * 60 * 24));
 var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 var text;
 
 // 计算倒计时时间
 if (days >= 2) {
 if ((hours + minutes + seconds) == 0) {
 if (days == 2) {
 text = "48h 0m 0s";
 } else {
 text = days + "d";
 }
 } else {
 text = (days + 1) + "d";
 }
 } else {
 if (days == 1) {
 hours = hours + 24;
 }
 text = hours + "h " + minutes + "m " + seconds + "s ";
 }
 
 // 剩余时间为负时，退出倒计时
 if (distance < 0) {
 clearInterval(x);
 document.getElementById("demo").innerHTML = "EXPIRED";
 }
 document.getElementById("demo").innerHTML = text; // 展示倒计时时间
 distance -= 1000; // 更新时间
 
 }, 1000);
 </script></body></html>

### *3.1 格式化时间未考虑时区* ###

原始代码：

var countDownDate = new Date(getStartTime()).getTime();  //伪代码, 获取活动开始时间

这里的getStartTime()存在一个坑。例如，如果返回Mar 10, 2023 00:00:00，由于没有带上时区信息，因此这个时间是有歧义的。对于不同时区的人来说，这个是完全不同的绝对时间。如果不配置时区信息，那么活动开始时间根本就可能是错误的(例如，业务期望的时间是欧洲时间，代码配置的却是中国时间)，所有人都将看到错误的倒计时。

原则上，在代码中处理时间时，要指定标准的时区信息，不能使用缺省时区。

### *3.2 当前时间未从服务端读取* ###

原始代码：

var now = getCurrentTime(); //伪代码，获取当前时间

这里getCurrentTime()存在一个坑，如果从浏览器本地获取，由于用户本地机器时间的差异性，在同一时刻，不同用户看到的倒计时可能不同。严重着，可能造成某些用户提前开始活动，造成线上故障。正确的做法是让服务端提供接口，从接口中获取服务端经过时间同步后的标准时间。

原则上，查询当前时间，不能以客户端的时间为准，需要使用服务端时间。

### *3.3 倒计时计算错误* ###

上面的倒计时计算代码，是非常容易出现BUG的。代码虽然只有10几行，但是有4个分支判断，各种分支组合众多。任何一个分支条件出现问题，都会导致在某些时间点，倒计时展示错误。

// 计算倒计时时间
    if (days >= 2) {
      if ((hours + minutes + seconds) == 0) {
        if (days == 2) {
          text = "48h 0m 0s";
        } else {
          text = days + "d";
        }
      } else {
        text = (days + 1) + "d";
      }
    } else {
      if (days == 1) {
        hours = hours + 24;
      }
      text = hours + "h " + minutes + "m " + seconds + "s ";
    }

对于这种情况，我们需要采取白盒覆盖策略，以分支覆盖为目标，确保每一个分支条件被覆盖。据此，我们需要测试的场景至少有：(假设活动开始时间为Mar 10,  2023 00:00:00 UTC+08:00)

<table> 
 <tbody> 
 <tr> 
 <td colspan="1"> 编号 </td> 
 <td colspan="1"> 分支 </td> 
 <td colspan="1"> 场景描述 </td> 
 <td colspan="1"> 测试用例 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 1 </td> 
 <td colspan="1"> days&nbsp;&gt;&nbsp;2&nbsp;且&nbsp;hours/minutes/seconds为0 </td> 
 <td colspan="1"> 2天以上，且为整数天 </td> 
 <td colspan="1"> 当前时间：Mar 7, 2023 00:00:00 UTC+08:00 预期倒计时：3d </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 2 </td> 
 <td colspan="1"> days&nbsp;&gt;&nbsp;2&nbsp;且hours/minutes/seconds有一个不为0 </td> 
 <td colspan="1"> 2天以上，且不为整数天 </td> 
 <td colspan="1"> 当前时间：Mar 6, 2023 23:59:59 UTC+08:00 预期倒计时：4d </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 3 </td> 
 <td colspan="1"> days&nbsp;=&nbsp;2&nbsp;且&nbsp;hours/minutes/seconds为0 </td> 
 <td colspan="1"> 刚好2天 </td> 
 <td colspan="1"> 当前时间：Mar 8, 2023 00:00:00 UTC+08:00 预期倒计时：48h 0m 0s </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 4 </td> 
 <td colspan="1"> days&nbsp;=&nbsp;1&nbsp;且&nbsp;hours/minutes/seconds有一个不为0 </td> 
 <td colspan="1"> 1天到2天之间 </td> 
 <td colspan="1"> 当前时间：Mar 8, 2023 23:00:00 UTC+08:00 预期倒计时：25h 0m 0s </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 5 </td> 
 <td colspan="1"> days&nbsp;=&nbsp;1 </td> 
 <td colspan="1"> 刚好1天 </td> 
 <td colspan="1"> 当前时间：Mar 9, 2023 00:00:00 UTC+08:00 预期倒计时：24h 0m 0s </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 6 </td> 
 <td colspan="1"> days&nbsp;&lt;&nbsp;1&nbsp; </td> 
 <td colspan="1"> 小于1天 </td> 
 <td colspan="1"> 当前时间：Mar 9, 2023 01:00:00 UTC+08:00 预期倒计时：23h 0m 0s </td> 
 </tr> 
 </tbody> 
</table>

除此之外，还需要针对倒计时出现边界进行验证：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1"> 编号 </td> 
 <td colspan="1"> 场景 </td> 
 <td colspan="1"> 测试用例 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 1 </td> 
 <td colspan="1"> 倒计时刚好为0 </td> 
 <td colspan="1"> 当前时间：Mar 10, 2023 00:00:00 UTC+08:00 预期倒计时：0h 0m 0s </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 2 </td> 
 <td colspan="1"> 倒计时为负，即活动已开始 </td> 
 <td colspan="1"> 当前时间：Mar 10, 2023 00:00:01 UTC+08:00 预期倒计时：EXPIRED </td> 
 </tr> 
 </tbody> 
</table>

上述倒计时计算代码，本质上属于强逻辑计算类模块。对于这些模块，原则上需要：

1.  *进行充分的白盒测试，以行覆盖、分支覆盖为目标，确保所有边界条件被测试到*
2.  *将强逻辑计算类模块封装起来，通过构造输入参数，实现对各种测试场景的快速Mock，保证可测性*

### *3.4 时间格式化错误* ###

在上述代码中，我们多次调用浏览器内置的new Date函数。由于浏览器型号和版本的差异性，这个函数可能返回不同的结果，甚至可能返回异常。以获取获取时间戳的代码为例：

new Date("2023-03-10 00:00:00").getTime()

在Chrome浏览器110版本中，执行符合预期：

![1794ceb9bb5b9fda4b5ceea8cd5664bf.png][]

在Safari浏览器14.1版本中，执行不符合预期：

![1f544df0aa9f1d2cbf52b7e6b8f99cbe.png][]

因此，使用Safari 14.1浏览器的用户，将看到错误的倒计时。

针对这类可能存在兼容性问题的场景，我们需要执行兼容性测试，覆盖用户主流的浏览器型号与版本

## **4 如何把事情做对** ##

根据上面的分析，可以看到，倒计时产品，有很多容易踩中的坑，是一个很有质量风险的产品。那么，如何保障这样一个产品的质量呢？这需要我们采取系统的软件工程方法论，从架构设计、编码实践、测试验证三个方面采取行动。

这些都不是什么高大上的东西，是软件工程最基本的要求，也是卓越工程的本质所在。

### *4.1 架构设计* ###

倒计时产品，不是一个纯前端模块，而是一个包含前后端的系统。后端至少提供两个服务：活动时间查询服务和当前时间查询服务。设计过程中，需要考虑服务端的可用性，前后端接口的详细定义等。

![91e6af1498ede2df3a3bf552bb45de26.png][]

### *4.2 编程实践* ###

由于倒计时前端调用了后端服务，于后端接口可能出现的各种异常情况进行处理。这些都是常规注意事项。另外，针对倒计时这样的特殊功能，编程实践上还需特别注意：

1.  *前端需要对后端接口返回的时间进行正确解析*
2.  *前端处理时间时，要考虑时区信息，不能使用缺省时区*

注意到，这些编程实践，作为前辈教训的反思，却经常需要经过线上故障/问题的锤炼，才能让人刻在骨子里。代码评审(Code Review)，应该是开发者交流这类编程实践的很好的场所。

### *4.3 测试验证* ###

倒计时产品的测试验证应当是分层的、符合测试金字塔理论的，并且在必要的情况下，开展专项测试：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1"> 测试类型 </td> 
 <td colspan="1"> 覆盖目标 </td> 
 <td colspan="1"> 验证内容 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 单元测试 </td> 
 <td colspan="1"> 行覆盖、分支覆盖 </td> 
 <td colspan="1"> 1，时间格式处理逻辑 2，倒计时计算逻辑 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 接口测试 </td> 
 <td colspan="1"> 接口覆盖 </td> 
 <td colspan="1"> 1，活动时间查询接口 2，当前时间查询接口 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 系统测试 </td> 
 <td colspan="1"> 业务场景 </td> 
 <td colspan="1"> 1，倒计时功能 2，倒计时样式、行动点等 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 【专项】兼容性测试 </td> 
 <td colspan="1"> 用户机型覆盖 </td> 
 <td colspan="1"> 1，覆盖目标用户机型型号 2，覆盖目标用户机型版本 </td> 
 </tr> 
 <tr> 
 <td colspan="1"> 【专项】性能测试 </td> 
 <td colspan="1"> 接口性能指标 </td> 
 <td colspan="1"> 1，活动时间查询接口 2，当前时间查询接口 </td> 
 </tr> 
 </tbody> 
</table>

## **5 总结** ##

本文源自一次真实的项目经历，针对“倒计时”这个看似简单却在实际落地中暴露出一连串BUG的产品，深入解剖了它可能出现风险的地方。这些问题背后，体现了理论与实践的巨大差异，课后作业题与实战项目的巨大差异，可以run起来的代码与产品代码的巨大差异。

归根结底，我们只有采取系统的、基础的软件工程方法，追求卓越工程，才能打造高质量的软件产品。无论是对一个“倒计时”这样的小产品，还是对功能复杂的大型软件系统，都是如此。

**最后：** 下方这份完整的软件测试视频学习教程已经整理上传完成，朋友们如果需要可以自行免费领取**`【保证100%免费】`**

![在这里插入图片描述][9d205f76a3bb49d8bce29972548618fa.png_pic_center]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

![ea309a97fa574feeba0851be84cd3e93.gif][]

[fdcc3d90f656e281cc34bae5d085c118.png]: https://img-blog.csdnimg.cn/img_convert/fdcc3d90f656e281cc34bae5d085c118.png
[5d479bb7f8ed8c79175b68d17bb5c1f7.png]: https://img-blog.csdnimg.cn/img_convert/5d479bb7f8ed8c79175b68d17bb5c1f7.png
[1794ceb9bb5b9fda4b5ceea8cd5664bf.png]: https://img-blog.csdnimg.cn/img_convert/1794ceb9bb5b9fda4b5ceea8cd5664bf.png
[1f544df0aa9f1d2cbf52b7e6b8f99cbe.png]: https://img-blog.csdnimg.cn/img_convert/1f544df0aa9f1d2cbf52b7e6b8f99cbe.png
[91e6af1498ede2df3a3bf552bb45de26.png]: https://img-blog.csdnimg.cn/img_convert/91e6af1498ede2df3a3bf552bb45de26.png
[9d205f76a3bb49d8bce29972548618fa.png_pic_center]: https://img-blog.csdnimg.cn/9d205f76a3bb49d8bce29972548618fa.png#pic_center
[ea309a97fa574feeba0851be84cd3e93.gif]: https://img-blog.csdnimg.cn/ea309a97fa574feeba0851be84cd3e93.gif