前端学习28 相关面试题2

1. 前端设计模式

设计模式的目的就是编写更好高内聚、低耦合、可维护的代码，下面是我的前端中常见的设计模式和相应的场景。

单例模式：单例模式是一种只允许创建一个实例的模式。在前端中常用于创建全局唯一的对象，例如全局的状态管理器(vuex)、日志记录器等，避免了重复创建和资源浪费的问题。

class Store {
  constructor() {
    if (Store.instance) return Store.instance;
    this.data = {};
    Store.instance = this;
  }
}

工厂模式：工厂模式是一种根据参数不同创建不同对象的模式，工厂模式是前端中组件封装、业务分发、请求构建等常见场景中构造对象，通过统一入口控制实例的创建，提升了代码的扩展性和可维护性。

function ComponentFactory(type) {
  if (type === 'button') {
    return new ButtonComponent();
  } else if (type === 'input') {
    return new InputComponent();
  } else {
    throw new Error('Unknown type');
  }
}
//实际应用 API请求封装
function createAPI(type) {
  const base = 'https://api.example.com/';
  switch (type) {
    case 'user':
      return (endpoint) => fetch(base + 'user/' + endpoint);
    case 'admin':
      return (endpoint) => fetch(base + 'admin/' + endpoint);
    default:
      throw 'Unknown API type';
  }
}

const userAPI = createAPI('user');
userAPI('profile'); // => fetch('https://api.example.com/user/profile')

//vue动态组件
<component :is="currentType" />
  
const components = {
  'text': TextEditor,
  'img': ImageUploader,
  'table': TableEditor,
};

const getComponent = (type) => components[type] || DefaultComp;

观察者模式：观察者模式是一种对象间的一对多的依赖关系，当一个对象状态改变时，所有依赖他的对象都会自动更新。Vue 响应式系统、事件监听都是一种观察者模式。

// 简化观察者模式
class Observer {
  constructor() {
    this.subs = [];
  }
  subscribe(fn) { this.subs.push(fn); }
  notify(data) { this.subs.forEach(fn => fn(data)); }
}

发布订阅模式：发布订阅模式允许一个对象（发布者或者称为主题）发布事件，而其他对象（订阅者或者称为观察者）订阅这些事件。前端中eventBus、组件通信属于发布订阅模式。

class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅
  on(eventName, callback) {
    if (!this.events[eventName]) this.events[eventName] = [];
    this.events[eventName].push(callback);
  }

  // 发布
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(cb => cb(...args));
    }
  }

  // 取消订阅
  off(eventName, callback) {
    if (!this.events[eventName]) return;
    this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
  }

  // 只执行一次
  once(eventName, callback) {
    const wrapper = (...args) => {
      callback(...args);
      this.off(eventName, wrapper);
    };
    this.on(eventName, wrapper);
  }
}

代理模式：代理模式是一种通过一个代理对象控制对目标对象的访问的模式，懒加载、防抖节流、图片预加载属于代理模式。

注意：发布-订阅模式属于观察者模式的一种变体，但两者存在一些本质区别。

发布订阅模式：间接通信（通过事件中心）、高解耦（发布者和订阅者互不知道）、场景（事件总线、消息队列）。

观察者模式：直接通信（目标对象通知观察者）、低解耦（观察者知道被观察对象）、场景（DOM监听、vue2的数据绑定）。

总结：在前端开发中，常见的设计模式包括单例模式、工厂模式、观察者模式、发布订阅模式和代理模式。单例模式用于全局状态管理等只需一个实例的场景；工厂模式用于根据参数动态创建对象，常见于组件生成或接口封装；观察者模式体现为一对多依赖关系，如 Vue2 的响应式系统；发布订阅模式则通过事件中心实现解耦通信，典型如 EventBus；代理模式常用于懒加载、防抖等功能控制。这些设计模式能有效提升代码的复用性、可维护性和扩展性，是我在实际项目中非常重视的结构化思维方式。