组件设计原则有哪些？

[artdong]

组件设计原则有哪些？

[artdong]

组件库的价值

• 就个人而言，拥有一套自己的组件库，可以让你的开发变得更高效，让你在行业里更有价值
• 就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范，让你的团队在公司更具有影响力
• 就公司而言，拥有一套公司维护的开源组件库，可以让你的公司在行业里更具有影响力

哪些情况需要整合一套组件库

• 从业务上看，当业务达到一定规模后，很多地方需要复用
• 从设计上看，产品要遵循一定的设计规范来保持统一性
• 从开发上看，对开发效率要求高，需要快速迭代和响应开发需求
• 从维护上看，需要统一代码管理，需要达到更改一处全局响应的高可维护性

组件设计原则

• 就近管理

1. 单文件开发
2. 依赖的静态资源放在同级目录
3. 相关联组件也放在同级目录

• 职责单一

1. 单一职责的组件的好处很明显,由于职责单一就可以最大可能性地复用组件
2. 过度单一职责的组件也可能会导致过度抽象,造成组件库的碎片化

• 高内聚、低耦合

1. 高内聚：将逻辑紧密相关的内容放在一个组件内
2. 低耦合：不同组件之间的依赖关系要尽量弱化, 也就是每个组件要尽量独立

• 扩展灵活

组件要充分的考虑扩展性，除了提供丰富的props还要提供插槽(vue通过slot实现插槽、react通过children实现插槽)来完成用户的定制化需求

• 参数类型检测

如：React中propsTypes用于对传入参数的属性的检查

封装组件时应该先思考什么?

1. 这个组件应该是做什么的
2. 这个组件应该至少需要知道那些信息
3. 这个组件会反馈什么东西

在设计一个组件的时候我们不应该仅限于实现当前的需求，设计出一个只适用于单一项目的组件，而是应该是一个可以适应大部分同种需求的通用组件。所以我们在碰到一个需求的时候应该首先对需求进行抽象，而不是看到设计稿就撸着袖子上。