朝花夕拾

简答-架构

4 min read

搭建组件库/npm包

  • 脚手架
  • 构建工具选择，bundless打包
  • 本地开发服务器
  • 使用ts编写/生成ts类型声明
  • 组件库文档
  • 基础组件库单测/业务组件库可以省略
  • 自动化发版，包括beta、alpha、release版本
  • 核心维护人员专项负责，收口需求、fix问题、版本迭代

搭建项目

  • 脚手架
  • 路由/路由模式
  • 工具函数
  • 基础组件库/业务组件库/仓库组件库
  • 状态管理
  • pages
  • 请求管理

设计模式

单例模式

工具类封装、axios、全局状态管理

外观模式

封装的组件提供统一的api，供外部业务使用

对三方库做一个二次封装，提供一个统一的外观，业务不是直接依赖三方库，方便后续更换三方库。

比如自定义业务监控告警的函数封装、埋点的函数封装、组件的二次封装（类似于适配器模式）

装饰者模式

高阶组件（例如权限组件之类）、装饰器

发布-订阅模式

事件总线进行数据传递/通信、NativeEvent

与观察者模式区别：存在‌独立的事件中心（Event Bus/Broker）‌，发布者和订阅者通过中介通信，双方无直接交互。‌‌‌‌

// 事件总线类
class EventBus {
  constructor() {
    this.events = {}; // 存储事件及其对应的回调函数列表
  }
 
  // 订阅事件
  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
 
  // 取消订阅事件
  unsubscribe(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
 
  // 发布事件
  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}
 
// 示例使用
const eventBus = new EventBus();
 
// 定义回调函数
const callback1 = (data) => console.log('Callback 1 received:', data);
const callback2 = (data) => console.log('Callback 2 received:', data);
 
// 订阅事件
eventBus.subscribe('myEvent', callback1);
eventBus.subscribe('myEvent', callback2);
 
// 发布事件
eventBus.publish('myEvent', 'Hello Subscribers!');
 
// 取消订阅事件
eventBus.unsubscribe('myEvent', callback1);
 
// 再次发布事件
eventBus.publish('myEvent', 'Callback 1 has been removed.');
// 主题类
class Subject {
  constructor() {
    this.observers = []; // 观察者列表
  }
 
  // 注册观察者
  addObserver(observer) {
    this.observers.push(observer);
  }
 
  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
 
  // 通知所有观察者
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}
 
// 观察者类
class Observer {
  update(data) {
    console.log('Received data:', data);
  }
}
 
// 示例使用
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
 
subject.addObserver(observer1); // 添加观察者1
subject.addObserver(observer2); // 添加观察者2
 
subject.notify('Hello Observers!'); // 通知所有观察者
 
subject.removeObserver(observer1); // 移除观察者1
 
subject.notify('Observer1 has been removed.'); // 再次通知所有观察者

代理模式

proxy代理对象的访问

状态模式

不同的状态决定了不同的行为，使用状态模式（类似于策略表）来避免过多的if/else逻辑判断。

Graph View