徒手撸UI之TimePicker

QingUI是一个UI组件库

目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, Input

ES6语法编写，无依赖

原生模块化，Chrome63以上支持，请开启静态服务器预览效果， 静态服务器传送门

采用CSS变量配置样式

辛苦造轮子，欢迎来github仓库star： https://github.com/veedrin/qing

四月份找工做，求内推，坐标深圳

写在前面

去年年末项目中尝试着写过一个分页的Angular组件，而后就有了写QingUI的想法

过程仍是很是有意思的

接下来我会用几篇文章分别介绍每一个组件的大概思路，请你们耐心等待

这一篇介绍TimePicker日期选择器

最重要的，求star，求fork，求内推

QingUI

少废话，先上图

当前时间

介绍DatePicker的文章写的时候已经凌晨了，毕竟那天commit了50屡次，因此有点草率，这回我尽可能写的清楚一点

初始加载TimePicker的时候确定显示当前的时间，因此咱们首先要获取当前的时间

当前时间好说，只是ES6提供了解构赋值正好能够在这里派上用场

直接返回一个数组，须要的时候一次性赋值就行了

若是不须要这么多，没问题，ES6不只能够批发，还能够零售，贴不贴心！

为何秒不直接赋值呢？由于我以为不多有场景咱们须要精确到秒，还不如初始直接给个0，省的别人点一下，他要精确到秒是他的事

constructor() {
    [this.H, this.M, ] = this.nowTime();
    this.S = 0;
}

nowTime() {
    const date = new Date();
    return [date.getHours(), date.getMinutes(), date.getSeconds()];
}

当用户选择的时候，选中的就会高亮，以前的高亮会取消

咱们能够粗暴一点，每次点击都运行一个for循环，找到高亮，取消高亮，场子清完之后再将当前选中的高亮

不过这样性能确定是很差的

若是我把选中的时间缓存起来

每次点击的时候我还记得上次高亮的在哪，直接处理它就行了，少了一个for循环是否是好多了

不过要注意，每次点击都要把新值缓存，它就是个跟屁虫，可不能掉队

constructor() {
    [this.oldH, this.oldM, this.oldS] = [this.H, this.M, this.S];
}

切换

时钟、分钟、秒钟，总共有三个面板，因此我设置三个按钮，时间格动态渲染

假如用户点击时钟按钮，他要怎么辨别刚才点的是哪一个按钮呢？

下意识的，咱们会想到，当前活跃的，咱们就给它置灰，以来做区分，二来省的用户无聊老在一个地方点来点去形成重复渲染

我之前也有过一点经验，就是button的disabled属性并非经过true和false来控制的

真正控制它是否置灰的，是有没有这个属性

我以为这个设计...

因此咱们写一个控制置灰的函数，一样，oldDisabled是用来缓存的

ableAndDisableEvent(ableNode) {
    if (this.oldDisabled) {
        this.oldDisabled.removeAttribute('disabled');
    }
    ableNode.setAttribute('disabled', '');
    this.oldDisabled = ableNode;
}

有时候咱们有这样的需求，虽然点击事件是响应用户操做的，但偶尔咱们本身也但愿触发一下事件

用户能够触发点击事件，那么程序能够吗？

实际上是能够的，.click()，就这么简单

说实话这个我也是第一次见，多是我比较孤陋寡闻吧...

this.oldDisabled.click();

转数字

当咱们点击时，获取到的innerHTML其实是一个字符串

我但愿在入口把关，保证this.H; this.M; this.S;都是数字类型

因而咱们就要把字符串类型的数字转成真数字，这倒不难

我曾经测过几种字符串类型的数字转成真数字的方法，固然，我说的是正整数

• parseInt()
• parseFlout()
• Number()
• Math.floor()
• num - 0

性能确定是num - 0最好，可是这样并非特别正规

除此以外，性能最好的是parseInt()，parseFlout()要考虑小数位，Number()估计是内部的类型转换比较复杂

除了语义化并非特别好以外，我日常都喜欢用parseInt()

但这不是重点

重点是ES6在Number下面也挂载了该方法，window.parseInt()和Number.parseInt()都是能够的，为何这样作呢？

由于JS的全局对象window实在是太复杂了，它不只是全局对象，仍是窗口对象，连全部的全局变量都挂在它下面

因此W3C但愿改变这个现状，尽可能减小甚至取消window下面的属性

这也是为何在ES6模块内，指向全局的this等于undefined

因此，若是兼容性容许的话，尽可能用Number.parseInt()代替window.parseInt()，为美妙的JS尽一份力

离Everything Based On JavaScript就不远了吧

格式化

比较正规的时间表盘都会显示两位数，好比3点20分，会写成03: 20

因此咱们也须要一个两位数的格式化函数

为何须要String(num).length === 1这个判断条件？

由于有时传进来的参数已经格式化过了，而它实际上又小于10，因此须要过滤掉它们

twoDigitsFormat(num) {
    if (String(num).length === 1 && num < 10) {
        num = `0${num}`;
    }
    return num;
}

而后我再用一个漏斗函数把变化收集起来，统一更新

timeChangeEvent(hour, minute, second) {
    hour ? this.H = hour : '';
    minute ? this.M = minute : '';
    second ? this.S = second : '';
    this.$view.innerHTML = this.timeFormat(this.H, this.M, this.S);
}

至于显示成最终的时间格式，咱们有它

timeFormat(hour = 0, minute = 0, second = 0) {
    hour = this.twoDigitsFormat(hour);
    minute = this.twoDigitsFormat(minute);
    second = this.twoDigitsFormat(second);
    return `${hour} : ${minute} : ${second}`;
}

写在后面

首先，这个时间选择器确实很差看，我未来可能会重构

而后，时间选择器也确实比较简单，比日期选择器代码少多了

不过仍是能够本身尝试着本身写一个，一切都在细节里

下一篇文章介绍Paginator，敬请期待

最后，求star，求fork，求内推

QingUI