手记

【金秋打卡】第3天 Web前端架构师2022版

课程章节: 第七周 B端项目需求分析 和 架构设计

主讲老师:张轩

课程内容:

今天学习的内容包括:

3-1 组件库难点解决方案

课程收获:

两个项目怎样重用这些组件?

在不同的项目中重用这些组件,所以把这些组件自然而然的抽取成一个代码库。降低和任何一个项目的耦合性,单独代码库让业务组件有独立的标准开发流程:

  • 编码
  • 测试
  • 打包生成通用 JS 模块
  • 发布至 NPM
  • CI/CD - 自动发布

组件属性设计

从需求可以的得知:https://www.yuque.com/docs/share/37224f92-3071-4ff7-adf1-0d0635677c34 组件的属性和这些可以编辑的属性很自然地一一对应的结果。对于每一个组件,它们需求中的属性其实可以分为两大类。

// 方案一,将 css 作为一个统一的对象传入
<LText
    css={{color: '#fff' ...}}
    text="nihao"
/>
// 内部实现比较简单
<p style={props.css}></p>

// 方案二,将 所有属性全部平铺传入
<LText
    :text="nihao"
    :color="#fff"
  ...
/>
// 内部实现会复杂一点
const styles = stylePick(props)
<p style={styles}></p>

// 方案一内部实现简单,但是保存的时候要多一层结构,并且更新数据的时候要知道是样式还是其他属性
// 方案二 内部实现稍微复杂一点,但是保存简单,更新数据不需要再做辨别

组件扩展性的问题

组件扩展性在业务组件库中不存在什么问题,因为每个组件都是独立的个体,它们的实现方案也相对独立,那么这里的扩展性是指在编辑器中是否能对它进行适配,包括展示和编辑的适配

0人推荐
随时随地看视频
慕课网APP