【前端设计模式】之装饰器模式

俊刚、

已于 2023-12-30 15:22:12 修改

阅读量1.3k

点赞数 20

分类专栏：前端设计模式文章标签：前端设计模式装饰器模式

于 2023-12-07 10:34:32 首次发布

本文链接：https://blog.csdn.net/csdn9_14/article/details/134849174

版权

前端设计模式专栏收录该内容

24 篇文章 5 订阅

订阅专栏

✨ 专栏介绍

设计模式是在软件开发中经过验证的解决问题的方法。它们是从经验中总结出来的，可以帮助我们更好地组织和管理代码，提高代码的可维护性、可扩展性和可重用性。无论是前端还是后端开发，设计模式都扮演着重要的角色。在本专栏中，我们将探索一些常见的前端设计模式，并学习如何将它们应用于实际项目中。通过掌握这些设计模式，我们可以编写更优雅、可靠且易于维护的前端代码。
在这里插入图片描述
本文主要讲解结构型模式中的装饰器模式

在这里插入图片描述

文章目录

概念

装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许在不改变原有对象结构的情况下，动态地给对象添加额外的功能。装饰模式通过创建一个包装器（装饰器）来包裹原有对象，并在保持接口一致性的前提下，增加新的行为或修改原有行为。

装饰器模式特性

继承或实现相同的接口：装饰器和原始对象实现相同的接口或继承相同的基类，使得客户端可以透明地使用装饰器。
动态添加功能：通过创建不同的装饰器类，可以动态地给对象添加额外的功能。
透明性：对于客户端来说，无需关心具体使用了哪些装饰器，只需要与原始对象进行交互。

应用示例

简单示例

以下是一个简单示例，展示了如何使用装饰模式给对象添加额外的功能：

// 定义原始对象接口
class Component {
  operation() {
    // 执行原始操作
  }
}
// 定义具体原始对象类
class ConcreteComponent extends Component {
  operation() {
    console.log("Executing original operation.");
  }
}
// 定义装饰器类
class Decorator extends Component {
  constructor(component) {
    super();
    this.component = component;
  }
  operation() {
    this.component.operation();
    // 执行额外的操作
    console.log("Executing additional operation.");
  }
}
// 使用示例
const component = new ConcreteComponent();
component.operation(); // 输出: "Executing original operation."
const decoratedComponent = new Decorator(component);
decoratedComponent.operation(); // 输出: "Executing original operation." 和 "Executing additional operation."

在上述示例中，我们定义了一个原始对象接口Component和具体原始对象类ConcreteComponent。然后，我们定义了一个装饰器类Decorator，它继承自Component并持有对原始对象的引用。在装饰器的operation方法中，我们首先调用原始对象的操作，然后执行额外的操作。

动态添加功能

当需要在不改变原有代码结构的情况下，给对象添加新功能时，可以使用装饰模式。例如，在UI组件中动态添加样式、事件处理等功能。

// 定义原始UI组件类
class UIComponent {
  render() {
    // 渲染UI组件
    console.log("Rendering UI component.");
  }
}
// 定义样式装饰器类
class StyleDecorator extends UIComponent {
  constructor(component, style) {
    super();
    this.component = component;
    this.style = style;
  }
  render() {
    this.component.render();
    // 添加样式
    console.log(`Adding style: ${this.style}`);
  }
}
// 定义事件处理装饰器类
class EventDecorator extends UIComponent {
  constructor(component, event) {
    super();
    this.component = component;
    this.event = event;
  }
  render() {
    this.component.render();
    // 添加事件处理
    console.log(`Adding event: ${this.event}`);
  }
}
// 使用示例
const uiComponent = new UIComponent();
uiComponent.render(); // 输出: "Rendering UI component."
const styledComponent = new StyleDecorator(uiComponent, "color: red;");
styledComponent.render(); // 输出: "Rendering UI component." 和 "Adding style: color: red;"
const eventfulComponent = new EventDecorator(uiComponent, "click");
eventfulComponent.render(); // 输出: "Rendering UI component." 和 "Adding event: click"

首先，我们定义了一个原始的UI组件类UIComponent，它有一个render方法用于渲染UI组件。

然后，我们定义了两个装饰器类StyleDecorator和EventDecorator，它们继承自UIComponent并持有对原始组件的引用。

在装饰器的render方法中，首先调用原始组件的渲染方法，然后添加额外的样式或事件处理。通过创建不同的装饰器对象并调用其render方法，我们可以动态地给UI组件添加样式和事件处理功能。

动态修改行为

当需要在不修改原有行为代码的情况下，修改对象的行为时，可以使用装饰模式。例如，在数据请求中动态添加缓存、日志记录等功能。

// 定义原始数据请求类
class DataRequest {
  fetchData(url) {
    // 发送数据请求并返回结果
    console.log(`Fetching data from ${url}`);
    return `Data from ${url}`;
  }
}
// 定义缓存装饰器类
class CacheDecorator extends DataRequest {
  constructor(dataRequest) {
    super();
    this.dataRequest = dataRequest;
    this.cache = {};
  }
  fetchData(url) {
    if (this.cache[url]) {
      console.log(`Fetching data from cache for ${url}`);
      return this.cache[url];
    } else {
      const data = this.dataRequest.fetchData(url);
      this.cache[url] = data;
      return data;
    }
  }
}
// 定义日志记录装饰器类
class LogDecorator extends DataRequest {
  constructor(dataRequest) {
    super();
    this.dataRequest = dataRequest;
  }
  fetchData(url) {
    console.log(`Fetching data from ${url}`);
    const data = this.dataRequest.fetchData(url);
    console.log(`Data fetched: ${data}`);
    return data;
  }
}
// 使用示例
const dataRequest = new DataRequest();
dataRequest.fetchData("https://api.example.com/data"); // 输出: "Fetching data from https://api.example.com/data"
const cachedDataRequest = new CacheDecorator(dataRequest);
cachedDataRequest.fetchData("https://api.example.com/data"); // 输出: "Fetching data from https://api.example.com/data"
cachedDataRequest.fetchData("https://api.example.com/data"); // 输出: "Fetching data from cache for https://api.example.com/data"
const loggedDataRequest = new LogDecorator(dataRequest);
loggedDataRequest.fetchData("https://api.example.com/data"); // 输出: "Fetching data from https://api.example.com/data" 和 "Data fetched: Data from  https://api.example.com/data"

首先，我们定义了一个原始的数据请求类DataRequest，它有一个fetchData方法用于发送数据请求并返回结果。

然后，我们定义了两个装饰器类CacheDecorator和LogDecorator，它们继承自DataRequest并持有对原始请求对象的引用。

在装饰器的 fetchData 方法中，首先检查缓存是否存在请求结果，并返回缓存数据；如果缓存不存在，则调用原始请求对象的 fetchData 方法获取数据，并进行相应的缓存或日志记录操作。通过创建不同的装饰器对象并调用其 fetchData 方法，我们可以动态地给数据请求添加缓存。

优缺点

优点

可以动态地给对象添加额外的功能，而无需修改原有代码。
可以透明地使用装饰器和原始对象，客户端无需关心具体使用了哪些装饰器。
提供了一种灵活的方式来扩展对象的功能，遵循开闭原则。

缺点

可能会导致类的数量增加，增加了代码复杂性。
对于复杂的装饰器链，调试和排查问题可能会变得困难。

总结

装饰器模式是一种常用的设计模式，在前端开发中有广泛应用。它通过动态地给对象添加额外的功能，而无需修改原有代码，实现了对象功能的扩展和修改。通过使用装饰器模式，可以提高代码的可维护性、可扩展性和灵活性。然而，需要根据具体情况权衡使用装饰器模式所带来的优缺点。

😶 写在结尾

前端设计模式专栏
在这里插入图片描述
设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏
在这里插入图片描述
Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏 在这里插入图片描述
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏