写个组件,顺便思考一下人生

#### 1. 起因
最近公司某一个项目升级,视觉设计师对细节要求较高,有一些组件的样式,作为前端的开发同学,大概都知道,设计师对于一些细节的要求,可是严格,而公司的一套基础组件库就无法达到要求,所以只能升级迭代这个组件库,甚至新增一些组件。

#### 2. 新增一个组件
年终了,也比较忙,正好上周有两天空闲的时间,就准备把颜色选择器给处理掉,项目中使用的颜色选择器,一直都是一个插件,所以,基于现状会有以下的思考:

1. 我只有两天(周四五)时间;(事实证明我想的太多了,能有一天就不错了)
2. 我之前没有写过颜色选择器。
3. 我下周就要开始另外一个紧急的项目,不能拖到下周。

基于以上的考虑,我决定还是依赖之前的插件,但是我在外层再进行一层包装,我认为这是最符合现在状况的一种方式,所以直接开始动手,实现这个新的组件;

于是,我就以我开发的流程开始了,先做了一些思考(但只限于大脑内思考):

1. 组件的输入支持哪些,如果非法输入怎么处理。
2. 组件的输出是什么,如果异常时,如何输出。
3. 组件的使用场景怎么样,我需要覆盖哪些场景,哪些交互。
4. 我可以强约定哪些交互,让整个组件使用更方便,更简单。

> 我个人认为,在做一个项目或者一个功能的时候,先把整个流程思考一遍,是特别有助于后面的开发,而且在这个时候,你也可以把一些不合理的地方提出来,找需求方或者交互设计师讨论,把所有可能的异常,进行前置,这个可以有效的保证你后续工作的顺利进行。

简单思考结束,有了一定的结果,就开始开发,按照我的开发习惯:

1. 先把HTML和CSS写好,也把各种状态下的样式写好(重构开发,重构的时候,我也会思考,我如何布局,才会让我后续写JS更简单方便);
2. 按功能分模块,实现组件的常规功能。
3. 验证处理边界状态,与异常状态;

在上述的实现过程中,就开始出现了问题,在第二条的时候,我发现,依赖的那个颜色选择器无法重新赋值(颜色选择器是`vue-color`,有疑惑的可以去看看),就导致我在开发了一半,突然给卡住了,还是那种致命的问题。

> 最关键的问题在于,最初发现这个问题时,你并不知道是为什么哪里导致的问题,定位问题永远都是最复杂的,尤其是问题出在一个黑盒内部,这里的vue-color相对当时的我就是一个黑盒。

虽然最后找到问题了,但是因为代码已经写了很多了,这个时候去解决问题,就像是一种修补丁的方式了,一点点的调试,代码越写越乱,越改越难改,这在之前对我来说是完全不会出现的情况,只因为我没有最初把这个事情想的太简单了。

> 这个时候,另外一个问题出现了,之前很多的逻辑,都是在脑子里思考的,并没有使用文档保存下来,在越来越混乱的代码里,我就渐渐地迷失了。

但是现在的问题是,时间不多了,还有其他的同事做开发,需要依赖到这个组件,所以就先修修补补的带着BUG发布了一版(同事只是开发而非上线),这个时候,已经是周五晚上的10点了。

晚上回去还是觉得不好,于是周六就去公司了,这次我就吸取了前两天的教训,首先第一件事,就是结合之前的问题,重新做了思考,并且把思考的内容,直接写到了纸上,如下图所示:
![Alt text](http://www.zhangyunling.com/study/architect/20181223/931545570226_.pic.jpg)

这里,我把最核心的一部分列举了出来,然后就开始重构逻辑的JS代码,于是重写了整个转换方法。

在接下来的四五个小时里,我把代码重构好了,逻辑跑通了,边界和异常条件也跑通了,相关的文档也补上了。也算是完成了这个组件,结束。

#### 3. 总结一下:
这个组件因为不需要开发最核心的部分,所以本来可以很简单的完成,所以进行一些简单的总结:
1. 我没有先去具体的了解我依赖的这个颜色选择器(所以导致后面除了致命的异常)
2. 事情想得太过于简单,思考的事情,只是在大脑内思考,没有记录下来,导致后面出现了混乱。

> 人力有时尽,只靠脑子去记一些事情,是不行的,这个不光是在这里的组件开发中,在工作,生活,学习,理财,健身,未来等都是存在的,在人活着的每一刻,都是存在的。

做了计划,就要有阶段性总结,要时刻把握整个方向,若计划执行出现异常,出现了偏离,及时把控或者调节,没有计划没有总结,就没有结果,就没有对比,就没有成长,现在也到了2018年的年底了,是时候该总结一下即将过去的2018了。

简单总结我的2018:忙忙碌碌,计划没有完成,算是个失败的一年(因为没有计划,没有阶段性总结,太过随性),2018过去之后,再做个详细的总结吧。

本文到此结束,如有问题,请留言指教,谢谢查看。
本文地址:http://www.zhangyunling.com/872.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

写个组件,顺便思考一下人生》有1个想法

  1. 小力说道:

    同行好,思路很清晰啊。
    对于后面计划那段话很好,我也深有体会。最近刚做了一个计划管理的小程序,有空可以体验下,名字是“明志笃行”,制定计划,总结得失,归档。