FE-Companions
FE-Companions copied to clipboard
20200302 - 👾卓异
问题列表:
- 学习antd组件库设计,用自己的话描述antd的优劣,画一个antd的架构图配合讲解。
- 对比antd和自己的组件库,是否有可以优化的地方?如果有,哪些地方可以优化。或是职责上有分工?如果是分工,那么怎么确定边界,如何包装?
- 梳理一张自己的知识图谱,并标记上各个技能点的熟练度 0~5,5代表和作者一样牛逼。
Q1:
优势:
- 周边工具有完整的闭环
- 文档清晰 (最近更新4, 文档打开非常慢, 可能我是移动的网- -!)
- 有一线技术支撑, 明确是中后台框架, 内部应该有很多业务实践
- 组件覆盖大部分应用场景, 相对适合国人使用
- 给出了框架, 也给了设计规范 劣势:
- 用了很多rc组件,不利于阅读和调试
- 一些动画视觉上有点卡(hhhhh)
- 改用hooks ? (猜测 可能考虑兼容, 时间上的成本 进行逐一改造) 总结: 本身对react 熟悉程度有限, 所以就不评论内部实现好与坏了😂 .. 读源码主要学到的是代码组织的方式, 其次是一些优雅的写法~ 不太明白为什么要引用rc组件而不内部实现 (猜测可能还有其它地方也用到了rc组件) . 架构一句话总结 各自维护好自己 😂.
Q2: 优化(自己的组件库):
- Eslint, Stylelint, Cli 等配置单独抽出来 单独写成多个base NPM包 ? 疑问: 那么为什么antd没有这么做?
- 组件再细分 某些组件再抽象出一层xxxBase ? 比如 buttonBase ?
- 公共属性的抽离组织 职责上分工: 从 终端类型, 场景类型, 用户类型, 三个角度划分, 比如antd明确是中后台框架, 终端是pc, 用户大多数是企业用户, 除开通用组件, 可以围绕后台常见的各种表单, 表格, 数据可视化 之类的进行组件扩展包装,注重功能上的方便, 引用一句话 把简单事情做复杂,把复杂事情做简单. 自己的组件库, 是移动端, 并且是小程序, 用户是普通用户, 那么同样除开通用组件, 可以围绕小程序常用场景进行扩展, 比如常见的电商类, 商品简介, 商品规格, 提交订单栏 等一些小程序常见场景 进行组件扩展包装,因为面向是普通用户, 所以额外应该提供组件样式高度可定制的能力
最后: 本人实力有限,语言表达能力也不太好😂😂, 以上都是个人见解, 并不一定准确. 保持好奇心,共勉.
Q3: html+css+js => 3.5 vue => 3.5 react => 2 ts => 1.5 webpack => 1.5 gulp => 1.5 node => 0.5(T.T) http相关 => 1 测试相关 => 0 (T.T) 小程序 => 2.5 rn/ft => 0 算法相关 => 1
Q1的图画的非常好,结构清晰。为什么有rc组件这部分再去看一些博客,有必要再思考一下。
Q2的目的是希望反思组件库的价值,因为大部分情况大家会因为组件库的概念而去做组件库,或者换一个说法为了复用而复用,虽然对于单一项目来说,能抽离总是好的,但是这里是希望能去细想一下,我为什么要复用,哪些地方应该再抽象一层。想明白之后,或许对Q1为什么有rc会有感觉。
Q3技能图谱太过简略了,所以这里的打分都不靠谱,打分本身不是目的,而是看你能否看清楚自己的能力,能拆解到多细本身也是一种熟练度的表现。