邂逅前端设计模式，解锁高效开发的秘钥

2024-02-20 05:16:16

前端开发中的设计模式：赋能代码

工厂模式

工厂模式将对象创建与对象使用分离，允许通过工厂类创建不同类型的对象，而无需关注具体创建过程。在前端，它可用于轻松创建元素节点。

代码示例：

class ElementFactory {
  createElement(type) {
    switch (type) {
      case "div":
        return document.createElement("div");
      case "button":
        return document.createElement("button");
      default:
        throw new Error(`Invalid element type: ${type}`);
    }
  }
}

const factory = new ElementFactory();
const button = factory.createElement("button");
button.textContent = "Click me!";
document.body.appendChild(button);

单例模式

单例模式确保一个类仅有一个实例，通常用于创建全局对象。在前端，它可用于创建事件处理器或状态管理系统。

代码示例：

class Singleton {
  static instance = null;

  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

const singleton1 = new Singleton();
const singleton2 = new Singleton();

console.log(singleton1 === singleton2); // true

观察者模式

观察者模式允许对象（主题）向观察者发送消息。观察者对消息做出反应，从而进行相应的更新。在前端，它可用于监听 DOM 事件或状态变化。

代码示例：

class Subject {
  observers = [];

  subscribe(observer) {
    this.observers.push(observer);
  }

  notifyObservers(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.subscribe(observer1);
subject.subscribe(observer2);

subject.notifyObservers("Hello world!");

代理模式

代理模式为另一个对象提供代理访问，控制访问或添加额外功能。在前端，它可用于实现延迟加载或缓存请求。

代码示例：

class ImageProxy {
  constructor(url) {
    this.url = url;
    this.image = null;
  }

  load() {
    if (!this.image) {
      this.image = new Image();
      this.image.src = this.url;
    }
  }

  draw() {
    this.load();
    document.body.appendChild(this.image);
  }
}

const proxy = new ImageProxy("image.png");
proxy.draw();

适配器模式

适配器模式将一个接口转换为另一个接口，允许不兼容的对象协同工作。在前端，它可用于集成第三方库或不同的 UI 框架。

代码示例：

class LegacyButtonAdapter {
  constructor(legacyButton) {
    this.legacyButton = legacyButton;
  }

  onClick(listener) {
    this.legacyButton.addEventListener("click", listener);
  }
}

const legacyButton = document.querySelector(".legacy-button");
const adapter = new LegacyButtonAdapter(legacyButton);
adapter.onClick(e => console.log("Button clicked!"));

装饰器模式

装饰器模式通过在不更改对象的情况下添加新功能来扩展对象。在前端，它可用于添加样式、行为或动画效果。

代码示例：

class ButtonDecorator {
  constructor(button) {
    this.button = button;
  }

  addBorder(color) {
    this.button.style.border = `1px solid ${color}`;
  }

  addShadow(color) {
    this.button.style.boxShadow = `0 0 5px ${color}`;
  }
}

const button = document.querySelector("button");
const decorator = new ButtonDecorator(button);
decorator.addBorder("red");
decorator.addShadow("blue");

策略模式

策略模式将算法封装到独立类中，允许更改算法而不影响调用者。在前端，它可用于实现不同的排序或过滤策略。

代码示例：

class SortStrategy {
  sort(data) {
    throw new Error("Abstract method not implemented");
  }
}

class BubbleSortStrategy extends SortStrategy {
  sort(data) {
    for (let i = 0; i < data.length - 1; i++) {
      for (let j = 0; j < data.length - i - 1; j++) {
        if (data[j] > data[j + 1]) {
          [data[j], data[j + 1]] = [data[j + 1], data[j]];
        }
      }
    }
    return data;
  }
}

class QuickSortStrategy extends SortStrategy {
  sort(data) {
    if (data.length <= 1) {
      return data;
    }

    const pivot = data[Math.floor(data.length / 2)];
    const left = [];
    const right = [];

    for (let i = 0; i < data.length; i++) {
      if (data[i] < pivot) {
        left.push(data[i]);
      } else if (data[i] > pivot) {
        right.push(data[i]);
      }
    }

    return this.sort(left).concat(pivot, this.sort(right));
  }
}

const data = [3, 1, 4, 2, 5];
const strategy1 = new BubbleSortStrategy();
const strategy2 = new QuickSortStrategy();

console.log(strategy1.sort(data));
console.log(strategy2.sort(data));

备忘录模式

备忘录模式将对象状态存储在备忘录中，以便以后恢复到该状态。在前端，它可用于实现撤销或重做操作。

代码示例：

class Editor {
  content = "";

  createMemento() {
    return {
      content: this.content,
    };
  }

  restoreMemento(memento) {
    this.content = memento.content;
  }
}

const editor = new Editor();
const memento1 = editor.createMemento();

editor.content = "New content";
const memento2 = editor.createMemento();

editor.restoreMemento(memento1);

console.log(editor.content); // "New content"
editor.restoreMemento(memento2);

console.log(editor.content); // "Old content"