组件

设计组件思路

组件封装原则

1. 单一职责原则

组件里的每个模块，分别该承担某一个功能

多个组件 / 模块协同完成一件事，而不是一个组件替其他组件完成本该它自己完成的事情

2. 开放封闭原则

属性配置等 API 对外开放；组件内部 dom 及状态的更改、对外封闭

3. 高内聚、低耦合

组件内部通过 callback 方式直接调用，组件与组件之间通过发布订阅的模式通信

4. API 尽量和已知概念保持一致

API 命名：比如 聚焦 常用命名是 focusable 而不是 canFocus 等自己臆想的名字、还有如 onDeselect 等规范名字。

API 的功能要单一并表意：比如 active 表示活动状态、但不能代替表示 selected 选中状态。

5. 追求短小精悍

6. 避免太多参数

7. 缩小信赖范围和向稳定方向信赖

8. 适用 SPOT 法则 (Single Point Of Truth，就是尽量不要重复代码，出自《The Art of Unix Programming》)

9. 无副作用

10. 引用透明

11. 避免暴露组件内部实现

12. 避免直接操作 DOM

13. 适用好莱坞法则 (好莱坞法则： Don’t call us, we’ll call you, 又称 IoC, Inversion of control, 控制反转)

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

15. 充分隔离变化的部分

16. 组件和数据分享，信赖一致性的数据结构

组件封装实例

日历组件

面向初学者：如何写一个日历组件 (opens new window)

---

参考：前端组件化：vue 组件设计思想与遵从原则 (opens new window)