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

课程名称：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>

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

组件扩展性的问题

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