Vue组件库建设实践

·  阅读 1464

组件化 可视化 性能优化 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复制代码
分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改