在项目开发中，组件库设计一定要遵循一定原则

1、标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的发人员据此标准开发出一套标准统一的组件

2、独立性

• 描述了组件的细粒度，遵循单一职责原则，保持组件的纯粹性
• 属性配置等 API 对外开放，组件内部状态对外封闭，尽可能的少与业务耦合

3、复用与易用

• UI差异，消化在组件内部（注意并不是写一堆if / else )
• 输入输出友好，易用

4、适用 SPOT 法则

Single Point Of Truth ，就是尽量不要重复代码，出自《 The Art of Unix Programming 》

5、避免暴露组件内部实现

6、避免直接操作 DOM ，避免使用 ref

使用父组件的 state 控制子组件的状态而不是直接通过 ref操作子组件

7、入口处检查参数的有效性，出口处检查返回的正确性

8、无环依赖原则（ ADP )

9、稳定抽象原则（ SAP )

• 组件的抽象程度与其稳定程度成正比
• 一个稳定的组件应该是抽象的（逻辑无关的）
• 一个不稳定的组件应该是具体的（逻辑相关的）
• 为降低组件之间的耦合度，我们要针对抽象组件编程，而不是针对业务实现编程

10、避免冗余状态

• 如果一个数据可以由另一个 state 变换得到，那么这个数据就不是一个 state ，只需要写一个变换的处理函数，在 Vue 中可以使用计算属性
• 如果一个数据是固定的，不会变化的常量，那么这个数据就如同 HTML 固定的站点标题一样，写死或作为全局配置属性等，不属于 state
• 如果兄弟组件拥有相同的 state ，那么这个 state 应该放到更高的层级，使用 props 传递到两个组件中

11、合理的依赖关系

父组件不依赖子组件，删除某个子组件不会造成功能异常

12、扁平化参数

除了数据，避复杂的对象，尽量只接收原始类型的值

13、良好的接口设计

• 把组件内部可以完成的工作做到极致，虽然提倡拥抱变化，但接口不是越多越好
• 如果常量变为 props 能应对更多的场景，那么就可以作为 props ，原有的常量可作为默认值
• 如果需要为了某一调用者编写大量特定需求的代码，那么可以考虑通过扩展等方式构建一个新的组件
• 保证组件的属性和事件足够的给大多数的组件使用

14、API 尽量和已知概念保持一致

 

<完>