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

#### 1. 起因

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

#### 2. 新增一个组件

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

1. 我只有两天（周四五）时间；（事实证明我想的太多了，能有一天就不错了）

2. 我之前没有写过颜色选择器。

3. 我下周就要开始另外一个紧急的项目，不能拖到下周。

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

于是，我就以我开发的流程开始了，先做了一些思考（但只限于大脑内思考）：

1. 组件的输入支持哪些，如果非法输入怎么处理。

2. 组件的输出是什么，如果异常时，如何输出。

3. 组件的使用场景怎么样，我需要覆盖哪些场景，哪些交互。

4. 我可以强约定哪些交互，让整个组件使用更方便，更简单。

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

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

1. 先把HTML和CSS写好，也把各种状态下的样式写好（重构开发，重构的时候，我也会思考，我如何布局，才会让我后续写JS更简单方便）；

2. 按功能分模块，实现组件的常规功能。

3. 验证处理边界状态，与异常状态；

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

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

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

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

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

晚上回去还是觉得不好，于是周六就去公司了，这次我就吸取了前两天的教训，首先第一件事，就是结合之前的问题，重新做了思考，并且把思考的内容，直接写到了纸上，如下图所示：


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

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

#### 3. 总结一下：

这个组件因为不需要开发最核心的部分，所以本来可以很简单的完成，所以进行一些简单的总结：

1. 我没有先去具体的了解我依赖的这个颜色选择器（所以导致后面除了致命的异常）

2. 事情想得太过于简单，思考的事情，只是在大脑内思考，没有记录下来，导致后面出现了混乱。

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

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

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