前端中常见的设计模式

啦咔2023-08-10 16:34

1.单例模式

描述：保证一个类仅有实例，并提供一个可以全局访问他的点，它通常用于管理应用程序的全局状态或资源，例如一个唯一的状态管理器。

代码示例：

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

2. 观察者模式

描述：观察者模式用于建立对象之间的一对多依赖关系，使得当一个对象的状态发生变化时，所有依赖它的对象都会得到通知。在前端中，常见于事件处理和数据变化监听。

代码示例

class Observable {
  constructor() {
    this.observers = [];
  }
  addObserver(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 Observable();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers("Hello, observers!");

3. 工厂模式（Factory Pattern）：

描述：工厂模式用于通过一个共同的接口来创建对象，隐藏了对象的创建细节。在前端中，可以用于创建不同类型的UI组件。

代码示例

class Button {
  render() {
    console.log("Rendering a button");
  }
}
class Input {
  render() {
    console.log("Rendering an input");
  }
}

class UIFactory {
  create(type) {
    switch (type) {
      case "button":
        return new Button();
      case "input":
        return new Input();
      default:
        throw new Error("Invalid type");
    }
  }
}

const factory = new UIFactory();
const button = factory.create("button");
const input = factory.create("input");

button.render(); // Logs: "Rendering a button"
input.render();  // Logs: "Rendering an input"

4. 装饰者模式

描述：装饰者模式用于动态地将责任添加到对象上，以扩展对象的功能。在前端中，可以用于增强组件的功能。

代码示例：

class Component {
  operation() {
    console.log("Basic operation");
  }
}

class Decorator {
  constructor(component) {
    this.component = component;
  }
  operation() {
    console.log("Decorator operation");
    this.component.operation();
  }
}

const component = new Component();
const decoratedComponent = new Decorator(component);

component.operation();         // Logs: "Basic operation"
decoratedComponent.operation(); // Logs: "Decorator operation" followed by "Basic operation"

5.策略模式

描述：策略模式定义了一系列算法，并将每个算法封装起来，使得它们可以互相替换。在前端中，可以用于处理不同的数据转换、验证或处理逻辑。

代码示例

class PaymentStrategy {
  constructor(paymentMethod) {
    this.paymentMethod = paymentMethod;
  }
  pay(amount) {
    return this.paymentMethod.pay(amount);
  }
}

class CreditCardPayment {
  pay(amount) {
    console.log(`Paying ${amount} using credit card.`);
  }
}

class PayPalPayment {
  pay(amount) {
    console.log(`Paying ${amount} using PayPal.`);
  }
}

const creditCardPayment = new PaymentStrategy(new CreditCardPayment());
creditCardPayment.pay(100); // Logs: "Paying 100 using credit card."

const payPalPayment = new PaymentStrategy(new PayPalPayment());
payPalPayment.pay(50); // Logs: "Paying 50 using PayPal."

6. 适配器模式

描述：适配器模式用于将一个类的接口转换成客户端期望的另一个接口。在前端中，可以用于处理不同数据格式或API之间的适配。

代码示例

class OldApi {
  request() {
    return "Response from old API";
  }
}

class NewApi {
  fetch() {
    return "Response from new API";
  }
}

class Adapter {
  constructor(api) {
    this.api = api;
  }
  request() {
    if (this.api instanceof OldApi) {
      return this.api.request();
    } else if (this.api instanceof NewApi) {
      return this.api.fetch();
    }
  }
}

const oldApi = new OldApi();
const newApi = new NewApi();

const oldAdapter = new Adapter(oldApi);
console.log(oldAdapter.request()); // Logs: "Response from old API"

const newAdapter = new Adapter(newApi);
console.log(newAdapter.request()); // Logs: "Response from new API"

7. 命令模式

描述：命令模式将请求或操作封装成对象，允许参数化调用。在前端中，可以用于处理用户操作、撤销/重做功能等。

代码描述:

class Command {
  constructor(receiver) {
    this.receiver = receiver;
  }
  execute() {
    this.receiver.performAction();
  }
}

class Receiver {
  performAction() {
    console.log("Action performed");
  }
}

const receiver = new Receiver();
const command = new Command(receiver);

command.execute(); // Logs: "Action performed"

8. 代理模式

描述： 代理模式控制对其他对象的访问，可以添加额外的逻辑，如缓存、权限控制等。在前端中，可以用于懒加载、请求缓存等场景。

代码描述

class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }
  display() {
    console.log(`Displaying image: ${this.filename}`);
  }
  loadImageFromDisk() {
    console.log(`Loading image: ${this.filename}`);
  }
}

class ProxyImage {
  constructor(filename) {
    this.filename = filename;
    this.realImage = null;
  }
  display() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display();
  }
}

const image1 = new ProxyImage("image1.jpg");
image1.display(); // Logs: "Loading image: image1.jpg" followed by "Displaying image: image1.jpg"
image1.display(); // Logs: "Displaying image: image1.jpg" (no additional loading)

const image2 = new ProxyImage("image2.jpg");
image2.display(); // Logs: "Loading image: image2.jpg" followed by "Displaying image: image2.jpg"

9. 迭代器模式

描述：迭代器模式提供一种顺序访问聚合对象元素的方法，而无需暴露其内部表示。在前端中，可以用于遍历数据集合。

代码描述：

class Iterator {
  constructor(collection) {
    this.collection = collection;
    this.index = 0;
  }
  hasNext() {
    return this.index < this.collection.length;
  }
  next() {
    return this.collection[this.index++];
  }
}

const collection = [1, 2, 3, 4, 5];
const iterator = new Iterator(collection);

while (iterator.hasNext()) {
  console.log(iterator.next());
}

10. 状态模式

描述：状态模式允许对象在内部状态变化时改变其行为。在前端中，可以用于管理复杂的UI状态转换。

代码描述

class State {
  handle() {
    console.log("Default state handling");
  }
}

class ConcreteStateA extends State {
  handle() {
    console.log("State A handling");
  }
}

class ConcreteStateB extends State {
  handle() {
    console.log("State B handling");
  }
}

class Context {
  constructor() {
    this.state = new State();
  }
  setState(state) {
    this.state = state;
  }
  request() {
    this.state.handle();
  }
}

const context = new Context();
context.request(); // Logs: "Default state handling"

context.setState(new ConcreteStateA());
context.request(); // Logs: "State A handling"

context.setState(new ConcreteStateB());
context.request(); // Logs: "State B handling"

其他

  1. 模板方法模式：模板方法模式定义了一个算法的骨架，允许子类为其中的步骤提供具体实现。在前端中，可以用于创建可定制的UI组件。
  2. 组合模式：组合模式将对象组合成树状结构，以表示部分-整体的层次关系。在前端中，可以用于处理UI组件的嵌套结构。
  3. 备忘录模式：备忘录模式用于捕获对象的内部状态，并在需要时进行恢复。在前端中，可以用于实现撤销/重做功能或保存应用状态。
  4. 访问者模式：访问者模式用于在不改变元素类的情况下，为元素添加新的操作。在前端中，可以用于遍历并处理复杂的DOM结构或数据结构。
  5. 责任链模式：责任链模式将请求的发送者和接收者解耦，形成一个链条，并将请求沿着链条传递，直到有一个接收者能够处理它。在前端中，可以用于处理用户输入、事件处理等场景。
  6. 桥接模式：桥接模式用于将抽象部分与其实现部分分离，使它们可以独立变化。在前端中，可以用于处理不同平台或不同样式的渲染。
  7. 解释器模式：解释器模式用于定义语言的文法，并解释语言中的表达式。在前端中，可以用于处理自定义的模板语言或表达式。
  8. 享元模式：享元模式用于共享细粒度对象，以减少内存占用。在前端中，可以用于管理大量的相似对象，例如优化渲染性能。
  9. 合成模式：合成模式用于将对象组合成树状结构，以表示"整体-部分"的层次关系。在前端中，可以用于构建复杂的UI组件层次结构。
  10. 外观模式：外观模式提供了一个简化的接口，用于访问复杂子系统中的功能。在前端中，可以用于封装复杂的API调用，以提供更简洁的接口。
相关推荐
上趣工作室3 分钟前
vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结
前端·javascript·vue.js
家里有只小肥猫3 分钟前
el-tree 父节点隐藏
前端·javascript·vue.js
fkalis4 分钟前
【海外SRC漏洞挖掘】谷歌语法发现XSS+Waf Bypass
前端·xss
陈随易1 小时前
农村程序员-关于小孩教育的思考
前端·后端·程序员
云深时现月1 小时前
jenkins使用cli发行uni-app到h5
前端·uni-app·jenkins
昨天今天明天好多天1 小时前
【Node.js]
前端·node.js
2401_857610032 小时前
深入探索React合成事件（SyntheticEvent）：跨浏览器的事件处理利器
前端·javascript·react.js
雾散声声慢2 小时前
前端开发中怎么把链接转为二维码并展示？
前端
熊的猫2 小时前
DOM 规范 — MutationObserver 接口
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
天农学子2 小时前
Easyui ComboBox 数据加载完成之后过滤数据
前端·javascript·easyui
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化