前端代码优化的设计模式指南

2023-12-01 01:45:36

随着业务的不断迭代，前端代码需要在page.init()初始化代码块的最后增加一些功能，同时不影响原有的功能。传统上，我们会直接修改原有代码，例如：

const originalInit = page.init;
page.init = function() {
  // 原始功能
  originalInit.call(this);
  
  // 新增功能
  // ...
};

然而，这种方法具有侵略性，迫使我们在原有代码中手动插入新功能。为了解决这个问题，我们可以采用设计模式来优雅地扩展前端代码。

观察者模式

观察者模式允许对象订阅或取消订阅特定事件，并根据事件的发生做出反应。在这个场景中，我们可以让page.init()成为一个观察者，观察page.init.end事件。当page.init()完成初始化后，该事件将被触发，然后我们可以执行新功能。

// 创建一个观察者对象
const observer = {
  update: function() {
    // 执行新功能
    // ...
  }
};

// 订阅 page.init.end 事件
page.init.on('end', observer.update);

策略模式

策略模式定义了一组算法，每种算法封装在不同的策略类中。客户端可以动态地切换不同的策略，而无需修改客户端代码。我们可以将原始的初始化逻辑和新功能封装在不同的策略类中。

class OriginalInitStrategy {
  init() {
    // 原始功能
    // ...
  }
}

class NewInitStrategy {
  init() {
    // 新功能
    // ...
  }
}

// 设置默认策略为 OriginalInitStrategy
let initStrategy = new OriginalInitStrategy();

// 在 page.init() 中动态切换策略
page.init = function() {
  initStrategy.init();
};

装饰器模式

装饰器模式允许在不修改原有对象的情况下，为对象动态添加额外的功能。在这个场景中，我们可以创建一个装饰器类，包装page.init()，并在调用时执行新功能。

class InitDecorator {
  constructor(initFunction) {
    this.initFunction = initFunction;
  }
  
  init() {
    // 调用原始初始化函数
    this.initFunction();
    
    // 执行新功能
    // ...
  }
}

// 将 InitDecorator 作为 page.init() 的装饰器
page.init = new InitDecorator(page.init);