博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavasSript实现秒转换为“天时分秒”控件和TDD测试方法应用
阅读量:5908 次
发布时间:2019-06-19

本文共 1784 字,大约阅读时间需要 5 分钟。

背景

时间累计值,在顶层一般以秒为计算单位, 所以到页面上如果直接显示xx秒, 如果秒的值很大, 则用户得不到直观的感受, 到底有多长时间,

在日长生活中, 人们以天 时 分 秒为单位来记录时间累计值, 这样更容易为人们接受, 提高易用性。

本文就为了解决这个问题, 在页面控件 和 累计值秒 之间建立转换, 提供显示和配置。

设计思路

将秒转换为 天 时 分 秒 控件, 此处控件为下拉框,  从右到左, 分为四级, 每一级的单位权值递减,

天 的可选值 为  0 - +无穷, 1天=86400秒

时 的可选值 为 0 - 23, 1时=3600秒

分 的可选值为 0-59, 1分=60秒

秒 的可选值为 0-59

 

时间控件支持的范围 range=[x, y],  y>=x>=0

但是,需要注意当上一级单位下拉框选择为边界值时候, 则下一级下拉框中, 可选项可能不能填满, 例如

range = [0, 60],  分可选值为 0-1, 当分选择为 0时候, 秒可选值为 0-59, 当分选择为1时候, 秒可选值为0

 

同时对于最大值达不到的 单位控件, 则需要隐藏。

 

时间控件 静态包括 天 时 分 秒 四个子控件(四个下拉框),

控件加载时候, 根据range初始化时间控件, 此时该最大值达不到的单位控件需要隐藏掉, 各个子控件填充可选内容,  此过程记录为  InitTime

下一级控件需要根据上一级控件的当前值, 来填充可选值, 此功能实现需要在上一级的控件的 change事件中实现, 并且按照级别递归触发change。

开发过程

写完初始化函数, 和天 时 分 的change事件,

书写TDD相关的测试代码, 将各个用例写入测试代码, 则拉起一个测试网, 调试过程中, 此网可以一步一步添加,

在添加过程中, 遇到问题, 可会修改时间控件代码,  修改完毕后, 则添加下一个用例,

直到添加调试完所有你认可的测试用例。

 

这样开发后的控件, 经过足够多的用例检验, 质量可以保证。

而且为以后的维护打下基础, 如果后期需要微调此控件, 则微调后, 通过微调自己的TDD代码, 并且也需要通过本次开发的测试用例代码, 保证质量的继承性。

效果

代码如下:

    Second2DHMS        

 

在火狐上运行后, 控制台上打印如下:

 

引申

TDD属于单元测试范畴, 除了自己写TDD测试函数, 也可以借助测试框架 XUnit

js有对应的 JSUnit

1、 JsUnit  官网 http://www.jsunit.net/

github上项目(若干年前, 已经不再维护, 替换品为 Jasmine)

https://github.com/pivotal/jsunit

使用方法介绍:

http://www.cnblogs.com/youcai/archive/2012/02/10/2345689.html

与其比较:  JsUnit适合较大测试对象, 测试结果比较直观,  本控件规模小, 就不用此工具了。

此工具, 对于本文对象, 测试用例, 需要针对每种测试range, 单独开一个html, 然后组成一个 suite, 比较麻烦。

 

2、 https://github.com/jasmine/jasmine

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, projects, or anywhere that JavaScript can run.

日后研究。

 

3、 QUnit 基于JQuery的测试框架:

http://qunitjs.com/

对于本文若干测试range, 可以容纳与一个js文件中执行, 可以后续尝试。

QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});

 

你可能感兴趣的文章
Jquery里live事件移除原因
查看>>
《剑指offer》-前n项和不准用通解和各种判断
查看>>
sklearn中随机森林的参数
查看>>
[技术选型] Node.js
查看>>
Spring cloud子项目
查看>>
架构重构改善既有代码的设计
查看>>
关键词过滤算法【转】
查看>>
html5 indexDB的使用
查看>>
学习LaTex
查看>>
数据库分库分表(sharding)系列(四) 多数据源的事务处理
查看>>
python运算符优先级
查看>>
设计模式C++实现——模板方法模式
查看>>
Oracle使用row_number()函数查询时增加序号列
查看>>
正则表达式 取反 非
查看>>
p2p网贷3种运营模式
查看>>
[转][译] Closures in Lua - Lua中的闭包
查看>>
ThinkPHP学习(五)图片验证码
查看>>
(二)Linux——Linux常用指令
查看>>
Ubuntu下使用UFW配置防火墙(简化iptables的操作)
查看>>
编程规范(一 之kmalloc,fflush,fclose,char_init)
查看>>