前端开发设计模式——装饰器模式

前端拾光者

已于 2024-10-10 17:31:06 修改

阅读量1.8k

点赞数 47

分类专栏： JavaScript设计模式文章标签：设计模式前端 javascript 装饰器模式 vue.js

于 2024-10-09 14:08:42 首次发布

本文链接：https://blog.csdn.net/jxnd123456/article/details/142784478

版权

JavaScript设计模式专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、装饰器模式的定义和特点

1.定义

装饰器模式是一种结构型设计模式，它允许在不改变对象结构的情况下，动态地给一个对象添加一些额外的功能。这个模式通过创建装饰类来包装原始对象，装饰类与原始对象实现相同的接口，从而可以在运行时根据需要组合不同的装饰类来扩展对象的功能。

2.特点

保持接口一致性：装饰类和被装饰类实现相同的接口，这样在使用装饰后的对象时，对于客户端来说，它看起来仍然是原始类型的对象，客户端代码不需要进行修改就可以使用被装饰后的对象。

动态扩展性：可以在运行时动态地添加或移除装饰，根据不同的需求灵活组合装饰类，以实现不同的功能组合。

单一职责原则：每个装饰类都专注于一个特定的功能扩展，这样代码的可维护性和可读性更高。

二、装饰器模式的实现方式

1.在原生JS中实现（以类的形式为例）

（1）首先定义一个基础接口或者抽象类（在 JavaScript 中可以使用抽象类的概念来模拟）。例如，定义一个 Component 抽象类表示可被装饰的组件：

   class Component {
       operation() {
           throw new Error('Abstract method must be implemented');
       }
   }

（2）然后创建一个具体的组件类实现这个接口，例如 ConcreteComponent:

   class ConcreteComponent extends Component {
       operation() {
           console.log('ConcreteComponent operation');
       }
   }

（3）接着定义装饰器类，装饰器类也继承自 Component 抽象类，并且在构造函数中接收一个 Component 类型的实例，例如 Decorator:

   class Decorator extends Component {
       constructor(component) {
           super();
           this.component = component;
       }

       operation() {
           this.component.operation();
       }
   }

（4）最后创建具体的装饰器类，例如 ConcreteDecoratorA 和 ConcreteDecoratorB，它们在 operation 方法中添加额外的功能：

   class ConcreteDecoratorA extends Decorator {
       operation() {
           console.log('ConcreteDecoratorA before operation');
           super.operation();
           console.log('ConcreteDecoratorA after operation');
       }
   }

   class ConcreteDecoratorB extends Decorator {
       operation() {
           console.log('ConcreteDecoratorB before operation');
           super.operation();
           console.log('ConcreteDecoratorB after operation');
       }
   }

（5）使用方式如下：

   const component = new ConcreteComponent();
   const decoratedComponentA = new ConcreteDecoratorA(component);
   const decoratedComponentAB = new ConcreteDecoratorB(decoratedComponentA);
   decoratedComponentAB.operation();

2、在Vue中实现（以指令和混入为例）

2.1、指令方式实现装饰功能

假设我们有一个基础的 Vue 组件，例如一个简单的按钮组件：

   <template>
       <button @click="handleClick">Base Button</button>
   </template>

   <script>
   export default {
       methods: {
           handleClick() {
               console.log('Button clicked');
           }
       }
   };
   </script>

我们可以创建一个指令来装饰这个按钮组件，例如给按钮添加权限验证功能的指令。首先定义指令：

   Vue.directive('permission - check', {
       inserted: function (el, binding) {
           // 假设这里有一个权限验证逻辑，比如根据用户权限角色判断是否有点击按钮的权限
           const hasPermission = checkPermission(binding.value);
           if (!hasPermission) {
               el.disabled = true;
           }
       }
   });

这里的 checkPermission 是一个假设的函数，用于检查权限。然后在组件中使用这个指令：

   <template>
       <button @click="handleClick" v - permission - check="'button - click - permission'">
           Base Button
       </button>
   </template>

2.2、混入方式实现装饰功能

假设我们有一个基础的显示数据的 Vue 组件：

   <template>
       <div>{{ data }}</div>
   </template>

   <script>
   export default {
       data() {
           return {
               data: 'Base Data'
           };
       }
   };
   </script>

我们可以创建一个混入（mixin）来装饰这个组件，例如给数据添加格式化功能的混入。定义混入：

   const formatDataMixin = {
       computed: {
           formattedData() {
               return format(this.data);
           }
       }
   };

这里的 format 是一个假设的函数，用于格式化数据。然后在组件中使用这个混入：

   export default {
       mixins: [formatDataMixin],
       data() {
           return {
               data: 'Base Data'
           };
       },
       computed: {
           // 可以在组件中继续使用原始数据或者新的格式化后的数据
           combinedData() {
               return this.data +'(' + this.formattedData + ')'
           }
       }
   };