前端开发之装饰器模式

server/2024/9/25 19:04:01/

介绍

装饰器模式 是在不修改对象内部结构的情况下,动态地给对象添加功能的一种设计模式。在软件开发中,有时候我们需要为已有对象添加一些额外的行为,但不希望修改该对象的代码,装饰器模式可以很好的满足这一需求。

在TypeScript中,装饰器是一个函数,它可以用来注入或修改类、方法、属性或参数的行为。装饰器在编译阶段被执行,它会接收被装饰的目标作为参数,并且可以返回一个新的构造函数或方法。

装饰器的使用需要在 tsconfig.json 或者 tsconfig.app.json  中启用如下配置:

{"compilerOptions": {"experimentalDecorators": true,"emitDecoratorMetadata": true}
}

 

class Circle {draw() {console.log("画圆");}
}class Decorator {private circle: Circle;constructor(circle: Circle) {this.circle = circle;}draw() {this.circle.draw(); // 原有功能this.setBorder(); // 装饰}private setBorder() {console.log("设置边框颜色");}
}const circle = new Circle();
const  decorator = new Decorator(circle)
decorator.draw()

符合开放封闭原则:

  1. 装饰器和目标分离,解耦
  2. 装饰器可自由扩展
  3. 目标可自由扩展

场景 

(1)类装饰器

类装饰器用于装饰整个类,通常用来扩展或修改类的功能。

function LogClass(target: Function) {console.log(`Class decorated: ${target.name}`);
}@LogClass
class ExampleClass {constructor() {console.log("ExampleClass instance created");}
}const ec = new ExampleClass()
// Class decorated: ExampleClass
// ExampleClass instance created

在这个例子中,LogClass 装饰器会在 ExampleClass 类定义时打印信息。

(2)方法装饰器

方法装饰器用于装饰类中的方法,它可以对方法进行一些增强操作,例如添加日志、性能监控等。

function LogMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`Method ${propertyName} called with arguments: ${args}`);return originalMethod.apply(this, args);};return descriptor;
}class Calculator {@LogMethodadd(a: number, b: number): number {return a + b;}
}const calc = new Calculator();
calc.add(2, 3);  // 输出: Method add called with arguments: 2,3

在这个例子中,LogMethod 会拦截 add 方法的调用并记录传递的参数。

 (3)属性装饰器

属性装饰器用于装饰类中的属性,它可以用来改变属性的元数据或做一些额外的处理。

function Readonly(target: any, propertyName: string) {Object.defineProperty(target, propertyName, {writable: false});
}class Person {@Readonlyname: string = "John";
}const person = new Person();
person.name = "Jane";  // 这里会报错,因为 name 是只读的

在这个例子中,Readonly 装饰器将 name 属性设置为不可修改。

 (4)参数装饰器

参数装饰器用于装饰方法的参数,它通常用于对参数进行校验或元数据的处理。

function LogParameter(target: any, methodName: string, parameterIndex: number) {console.log(`Parameter in ${methodName} at index ${parameterIndex} is decorated`);
}class User {greet(@LogParameter message: string) {console.log(message);}
}const user = new User();
user.greet("Hello!");  // 输出: Parameter in greet at index 0 is decorated

在这个例子中,LogParameter 装饰器记录了 greet 方法的参数装饰情况。

AOP

面向切面编程(AOP,Aspect Oriented Program)是一种编程范式,通过将横切关注点(例如日志、事务管理等)从主要逻辑中分离出来,提高了代码的模块化和可重用性。在 TypeScript 中,AOP 可以与装饰器模式结合使用,以在代码的不同部分(方法、函数等)应用相同的横切关注点。

一个常见的 AOP 应用场景是性能监控,例如计算方法执行时间的装饰器:

function measure(target: any, key: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args: any[]) {const startTime = performance.now();const result = originalMethod.apply(this, args);const endTime = performance.now();console.log(`Method ${key} took ${(endTime - startTime).toFixed(2)} ms`);return result;};return descriptor;
}class Example {@measureprocess(data: string) {// 模拟一个耗时操作let result = '';for (let i = 0; i < 1000000; i++) {result += data;}return result;}
}const example = new Example();
const result = example.process("test"); 
// 输出方法执行时间:Method process took 32.30 ms

在这个示例中,measure 装饰器被应用于 process 方法,用来测量方法执行时间并输出日志。


http://www.ppmy.cn/server/121961.html

相关文章

影响CDN的因素

数字化转型的趋势下&#xff0c;企业纷纷将业务平台转移到互联网上&#xff0c;但过去的网站配置明显不能满足现有的访问量&#xff0c;常常造成访问拥堵、页面加载慢等问题。CDN的出现&#xff0c;极大地缓解了网络拥堵的情况&#xff0c;但很多人却发现&#xff0c;自己的网站…

Python | Leetcode Python题解之第421题数组中两个数的最大异或值

题目&#xff1a; 题解&#xff1a; class Trie:def __init__(self):# 左子树指向表示 0 的子节点self.left None# 右子树指向表示 1 的子节点self.right Noneclass Solution:def findMaximumXOR(self, nums: List[int]) -> int:# 字典树的根节点root Trie()# 最高位的二…

鸿蒙OpenHarmony【小型系统基础内核(物理内存管理)】子系统开发

物理内存管理 基本概念 物理内存是计算机上最重要的资源之一&#xff0c;指的是实际的内存设备提供的、可以通过CPU总线直接进行寻址的内存空间&#xff0c;其主要作用是为操作系统及程序提供临时存储空间。LiteOS-A内核管理物理内存是通过分页实现的&#xff0c;除了内核堆占…

tauri开发软件中,使用tauri自带的api用浏览器打开指定的url链接

有能力的可以看官方文档&#xff1a;shell | Tauri Apps 就是使用这个api来打开指定的url链接&#xff0c;要在tauri.config.json中配置打开这个api&#xff1a; 然后在前端页面中导入使用&#xff1a; import { open } from tauri-apps/api/shell; // opens the given URL o…

apache paimon简介(官翻)

介绍 如下架构所示: 读/写操作: Paimon 支持多样化的数据读写方式,并支持 OLAP 查询。 读取: 支持从历史快照(批处理模式)中消费数据,从最新偏移量(流处理模式)中读取数据,或以混合方式读取增量快照。写入: 支持从数据库变更日志(CDC)进行流式同步,从离线数据中…

el-table多选,分页切换时,选中内容不变;清空多选的内容

el-table中添加:row-key“getRowKeys” 设置true【 :reserve-selection“true”】 :row-key"getRowKeys" <el-table-column type"selection" :reserve-selection"true" width"55" align"center" fixed"left" …

Python提供内置正则表达式库

正则表达式是一种强大的文本处理工具&#xff0c;可以匹配文本片段的模式 最简单的正则表达式就是普通的字符串&#xff0c;可以匹配自身 要注意的是&#xff0c;正则表达式并不是一个程序&#xff0c;它使用一种特定的语法模式来描述在搜索文本时要匹配的一个或多个字符串。正…

解锁零售业中的AI力量:7个经过验证的增长策略

目录 将AI整合到实体零售店的好处7个经过验证的AI零售增长策略 1. 顾客行为分析2. 动态定价3. AI驱动的聊天机器人和虚拟助手4. AI驱动的库存管理5. 视觉搜索和图像识别6. 自动化的供应链优化7. 通过AR和VR增强的店内体验 中小零售企业实施AI解决方案在零售中实施AI的挑战为未…