Vue组件库建设实践

1,825 阅读2分钟

组件化 可视化 性能优化 Reason

一、组件和抽象

(1)组件是一种编程抽象,目的是复用
(2)通用型组件、业务型组件
(3)《程序员修炼之道》、DRY原则(dont`t repeat yourself)、《重构》改善已有代码设计、
(4)三次原则

二、组件库设计原则

《敏捷软件开发》原则、模式与实践
1.内聚性 粒度
2.耦合性 稳定 
( 高内聚低耦合)
粒度
1.共同复用原则 SRP单一职责原则
2.公用封闭原则(一个组件不应该包含多个引起它变化的原因)
一个组件不应该引用另一组件?
依赖的弊端
1.耦合=》高维护成本+不稳定性
2.代码的可维护性大于复用性
稳定
1.稳定依赖原则
X、Y、Z=》A   
H=》B 
M、N=《C
稳定性:A>B>C
2.稳定抽象原则

三、父子组件如何依赖?

1.子组件的初始化和调用由父组件容器负责
2.约定大于配置原则

四、设计禁区

越界操作
副作用
侵入性
环形依赖
属性繁多

五、设计规范先行

1.统一视觉样式:色彩、布局、字体、图标
统一交互动效:时长缓动、移动路径、形变编排
(参考网站:Material Design)
2.样式分离:需求:主题定制、样式差异化
3.辅助平台/工具:脚手架、文档、示例、迭代

六、组件库工程化最佳实践

多包管理工具:Lerna 多包管理工具
优点:一键安装依赖、自动更新依赖、独立版本管理、非Npm包
组件管理方案:
测试方案:
(1)Karma驱动、Mocha测试框架、chai断言库、Sinon mock、Istanbul覆盖率
(2)Jest一站式测试方案
文档方案:docsify 

七、总结展望

组件库还是要有的
合理的设计
周围生态很重要
造好轮子

八、实时案例展示

https://github.com/QingWei-Li/vuep.run