架构是什么

脱离业务的架构就是耍流氓。架构师必须要深入理解需求、参与需求、看透需求背后的业务本质。 技术永远都是为业务服务的，技术是实现业务增长的工具

  • 不要关注细节，要看整体，看范围
  • 设计时判断可行性，不确定的就调研一下
  • 设计要考虑负责度，越简单越好，不要过度设计，不要为了设计而设计

    技术方案文档

  1. 需求

  2. 范围

    1.  整体设计，架构设计，没有细节

  3. 模块设计

    1.  模块的拆分和关系图，结果<br />        模块的关键功能，职责等<br />        特殊的模块重点说明：
    • 组件库，独立第三方，
    • 自研统计服务； 为何自研
  4. 作品的数据结构

vuex store 的数据结构，解释
数据流转关系图

  1. 扩展性保证

    组件扩展，数据结构扩展
    扩展编辑器的功能，例如：组件隐藏、锁定
    扩展页面的配置

  2. 开发提效

脚手架
组件平台

  1. 运维保障

线上服务和运维服务
安全
监控和报警
服务扩展性：流量大

程序设计原则

开发时先要遵循设计原则，然后才搞设计模式

密封性和单一职责

为什么Antd中的 Select和Option是分开的？Tab和Panel是分开的？

  1. const Option = Select.Option 
  2. const TabPanel = Tab.Panel

关注点分离原则

UI层面的分离

单向依赖原则

不要直接修改props的数据

单一数据源(SSOT)

  1. const ProductList = (props) => {
  2.   const [passProps, setProps] = useState(props) 
  3.   return <X {...passProps}> </X> 
  4. }

最小知识原则

减少组件间参数传递

最小交互原则

多用组合、减少继承

开闭原则

对扩张开发、对修改封闭

领域设计原则

创建属于自己的领域方言，让每个对象拥有贴近场景的具体含义，做到专对象专用
用DSL(领域特定语言)描述你的系统

设计模式

单例(singleton)

举例：const editor = useContext(RenderContext)

  1. // 
  2. class IDGen { 
  3.   private constructor(){} 
  4.   static inst = new IDGen() 
  5.   static get(){ return inst } 
  6. }
  8. // 闭包也可以实现单例
  9. const signleton = () => { 
  10.   const obj = new ... 
  11.   return () => { ... } 
  12. }

工厂(Factory)

举例：React.createElement

观察者（Observer)

对象状态改变时通知其他对象。
举例：redux/vuex

代理模式（Proxy）

将代理类作为原类的接口。通常代理类会在原类型的基础上做一些特别的事情。
举例： vue reactivity 实现
使用场景： 你想在原有的类型上增加一些功能和变通处理，但是又不希望用户意识到时。

适配器模式(Adapter)

通过一层包装，让接口不同的类型拥有相同的用法。因此也称为包装模式(wrapper)。
举例： ant-design中的： onChange defaultValue ， react中单合成事件
重点：抹平差异

外观模式(Facade)

将多个复杂的功能隐藏在统一的调用接口中。
举例： vite dev | vite build
作用：整合资源 减低使用复杂度（开箱即用）

状态机（StateMachine)

将行为绑定在对象内部状态变化之上。
场景： 组织/管理交互设计 在DOM之上抽象用户交互

装饰器(Decorator)

在不改变对象、函数结构的情况下为它添加功能或说明。

迭代器(Iterator/Generator)

用Iterator来遍历容器内的元素（隐藏容器内部数据结构）。
举例： javascript的容器: Set, Array, HashMap

前端常见设计模式

组件的粒度

a. 业务无关
基础组件
b. 业务无关

单向数据流的场景：受控组件和非受控组件

受控组件：value值可以控制的。比如：,