剖析三大前端结构型设计模式：装饰器、适配器与代理

2023-10-03 16:46:37

前端结构型设计模式详解：装饰器、适配器和代理

在前端开发中，结构型设计模式扮演着至关重要的角色，它们可以帮助你构建灵活且可维护的应用程序。在这篇文章中，我们将深入探讨三种最常见的结构型设计模式：装饰器、适配器和代理。

装饰器模式：为对象披上新衣

想象一下你在一家服装店，想要为心爱的夹克添加一些独特的风格。装饰器模式就像一件额外的夹克，可以增强对象的现有功能，而无需对其进行任何改动。

装饰器模式允许你在不修改原始对象的情况下向其添加新的行为。它就像一层薄膜，包裹在原始对象周围，为其提供额外功能。

// 原生按钮类
class Button {
  click() {
    console.log('普通按钮');
  }
}

// 装饰器类
class DecoratedButton {
  constructor(button) {
    this.button = button;
  }

  click() {
    this.button.click();  // 调用原始方法
    console.log('装饰后按钮');
  }
}

const button = new Button();
const decoratedButton = new DecoratedButton(button);

decoratedButton.click(); // 输出：普通按钮，装饰后按钮

适配器模式：架起兼容的桥梁

你是否曾遇到过来自不同背景的人交流困难的情况？适配器模式就像一位翻译员，能够让原本不兼容的系统无缝合作。

适配器模式将一个对象的接口转换成另一个对象所期望的接口。它充当中间人，允许两个具有不同接口的对象进行交互。

// 旧系统类
class OldSystem {
  convertMilesToKm(miles) {
    return miles * 1.609;
  }
}

// 新系统类
class NewSystem {
  convertKmToMiles(km) {
    return km / 1.609;
  }
}

// 适配器类
class Adapter {
  constructor(oldSystem) {
    this.oldSystem = oldSystem;
  }

  convertKmToMiles(km) {
    return this.oldSystem.convertMilesToKm(km);
  }
}

const oldSystem = new OldSystem();
const adapter = new Adapter(oldSystem);

console.log(adapter.convertKmToMiles(10)); // 输出：6.213711922178447

代理模式：你的私人助理

想象一下有一个私人助理，负责处理你的所有杂务。代理模式就像这个助手，它可以代表另一个对象进行操作，并在过程中进行一些额外的处理。

代理模式允许你创建对象的一个代理，该代理可以控制对原始对象的访问并执行额外的操作。

// 真实主题类
class RealSubject {
  request() {
    console.log('真实主题');
  }
}

// 代理类
class Proxy {
  constructor(realSubject) {
    this.realSubject = realSubject;
  }

  request() {
    console.log('代理开始');
    this.realSubject.request();  // 调用真实主题方法
    console.log('代理结束');
  }
}

const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);

proxy.request(); // 输出：代理开始，真实主题，代理结束