vue组件设计笔记---稳定篇

如果说后端的特点是以数据为核心，那么前端的特点就是能在保证稳定性的基础上做的快速迭代

如何做到稳定呢？以下是自己的总结

1. 将组件原子化

按功能来说就是一个组件的功能越单一越好，比如下图搜索栏

image.png

功能单一则不易出bug，也有利于组件的组合复用，拼接成功能复杂的组件

2. 明确组件的应用场景（一个组件只对应一种场景）

参考上图，某天要改成另一个场景要怎么办？，在原组件上改，加参数判断？如果传1就显示第一个，如果传2就显示第二个？还是另外新建一个组件？
我更推荐第二种方法，如果在原组件上改很可能导致其他应用了该组件的场景产生新的bug（风险很大）,如果类似的改变多了，原组件会变得很臃肿、无法维护
但是直接新建一个组件也会导致新的问题，如果两个场景功能类似，就会产生大量的重复代码
比较上下两张图片我们会发现，两张图片只是外观变了，相同的是要实现搜索

image.png

所以我们可以再以上两个应用场景的基础上抽离出一个基础搜索栏组件

image.png

基础搜索栏组件代码(baseToolBox)：

image.png

一下图片是场景一的代码（仅供参考）：

image.png

image.png

看完代码，要实现场景二的功能最好的方法是：基于基础组件重写一个组件，也可以重写场景一组件slot（不推荐）

3. 归纳用户的操作流程

写代码之前必须要做的事情，预防有未覆盖的用户操作，如图

image.png

4. 梳理逻辑，让每一步都可预期

• 熟知每一行代码，怕忘记就加注释

• 必须保证代码的执行顺序，一般情况下队列调用优先级Promise.then(非异步)>setTimeout(默认30ms)>异步
  例如a依赖b，则b必须在a之前执行
  尽量少将有严格流程规定的代码放入watch()监听、change事件中执行。例如场景一中的时间选择组件,因为搜索事件是靠change触发，就导致流程很不好控制，
  比如：第n次进入组件时，我希望清空搜索条件，然后在执行查询，但是change事件的触发条件是文本框内的内容改变了才会触发，这是不可预期的，比起change我更希望是click；组件内过多的用watch也是同样的道理

  
  
  image.png

5. 写代码

注重规范

6. 测试

注重基础组件的测试

7. 写使用文档

文档是给自己看的也是给团队看的