前端开发之装饰器模式

介绍

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

在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.rhkb.cn/news/430895.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】

在数据可视化中&#xff0c;地图是很重要的一个环节&#xff0c;很多时候需要展现的不仅是国家地图&#xff0c;还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。 地图下钻看起来很屌、很高大上&#xff0c;但是仔细琢磨一下&#xff0c;技术实现上真的…

Cpp类和对象(下)(6)

文章目录 前言一、初始化列表概念使用注意实际运用explicit关键字初始化列表的总结 二、static成员static成员的概念static成员的特性static的一个实用场景 三、友元友元函数友元类 四、内部类概念特性 五、匿名对象六、再次理解封装和面向对象总结 前言 Hello&#xff0c;本篇…

『玉竹』基于Laravel 开发的博客、微博客系统和Android App

基于 Laravel 和 Filament 开发, 使用 Filament 开发管理后台&#xff0c;前端比较简洁。 博客大家都清楚是什么东西&#xff0c;微博客类似于微博之类的吧&#xff0c;有时候想要写的东西可能只有几句话&#xff0c;想要起个标题都不好起。 为了是微博客功能更好用&#xff0c…

【小程序】微信小程序课程 -3 快速上手之常用方法

目录 1、 对话框 1.1 模态对话框 1.2 消息对话框 2、 存储 2.1 同步 2.1.1 同步保存数据 2.1.2 同步获取数据 2.1.3 同步删除数据 2.1.4 同步清空数据 2.2 异步 2.2.1 异步保存数据 2.2.2 异步获取数据 2.2.3 异步删除数据 2.2.4 异步清空数据 3、 上拉加载更多…

Java类加载揭秘:从加载过程到双亲委派机制

类的加载 目标 能够理解字节码加载过程 【了解】 路径 类的加载过程类的加载时机 类的加载 当程序在运行后&#xff0c;第一次使用某个类的时候&#xff0c;会将此类的class文件读取到内存&#xff0c;并将此类的所有信息存储到一个Class对象中 说明&#xff1a;Class对象…

金仓数据库 KingbaseES参考手册 (8. 函数(九))

8.299. SCALE 用法&#xff1a; scale(numeric)功能&#xff1a; SCALE返回参数的精度&#xff08;小数点后的位数&#xff09;。 例子&#xff1a; SELECT scale(8.41);8.300. SCORE 用法&#xff1a; SCORE(lable number)输入参数&#xff1a; lable&#xff1a;表示第几个co…

js发送邮件至指定邮箱功能实现方式和技巧?

js发送邮件至指定邮箱的教程&#xff1f;怎么使用Node.js发信&#xff1f; 无论是用户反馈、订单确认还是密码重置&#xff0c;js发送邮件至指定邮箱的需求无处不在。AokSend将深入探讨js发送邮件至指定邮箱的实现方式和技巧&#xff0c;帮助开发者更好地理解和应用这一功能。…

windows桌面管理软件推荐:一键整理桌面!美化电脑桌面小助手!

windows桌面管理软件推荐来咯&#xff01;在繁忙的工作和生活中&#xff0c;一个整洁、有序的电脑桌面不仅能提升工作效率&#xff0c;还能带来愉悦的视觉体验。然而&#xff0c;随着文件的增多&#xff0c;桌面往往变得杂乱无章。幸运的是&#xff0c;市面上有许多优秀的Windo…

推荐一款开源的Redis桌面客户端

TinyRDM 是一个现代化的、轻量级的跨平台 Redis 桌面客户端&#xff0c;能在 Mac、Windows 和 Linux 系统上使用。它有着现代化的设计风格&#xff0c;界面既简洁又清晰&#xff0c;操作起来方便又高效。不管是刚开始接触的新手&#xff0c;还是经验丰富的开发者&#xff0c;都…

C++标准库类——string类

引言 在c中&#xff0c;string类的引用极大地简化了字符串的操作和管理&#xff0c;相比 C 风格字符串&#xff08;char*或cahr[]&#xff09;&#xff0c;std::string 提供了更高效和更安全的字符串操作。接下来让我们一起来深入学习string类吧&#xff01; 1.string 的构造…

Spring Cache的使用

一、简介 1. Spring Cache是Spring提供的一个缓存框架&#xff0c;在Spring3.1版本开始支持将缓存添加到现有的spring应用程序中&#xff0c;在4.1开始&#xff0c;缓存已支持JSR-107注释和更多自定义的选项。 1. Spring Cache利用了**AOP**&#xff0c;实现了基于注解的缓存…

【解密 Kotlin 扩展函数】命名参数和默认值(十三)

导读大纲 1.0.1 命名参数1.0.2 默认参数值 上一节讲述如何自定义 joinToString 函数来代替集合的默认字符串表示 文末遗留下几个待优化问题–传送门 1.0.1 命名参数 我们要解决的第一个问题涉及函数调用的可读性 例如,请看下面的joinToString调用: joinToString(collection,&…

【LLM多模态】Animatediff文生视频大模型

note AnimateDiff框架&#xff1a;核心是一个可插拔的运动模块&#xff0c;它可以从真实世界视频中学习通用的运动先验&#xff0c;并与任何基于相同基础T2I的个性化模型集成&#xff0c;以生成动画。训练策略&#xff1a;AnimateDiff的训练包括三个阶段&#xff1a; 领域适配…

spark之不同序列化对比

一&#xff0c;spark的rdd的序列话不同介绍 下面是使用不同序列化后的占用资源和数据大小 2&#xff0c;sparksql中序列化的区别 sparksql中使用序列化和不使用差别不大&#xff0c;英文sparksql中默认使用了encode自己实现的序列化方法&#xff0c;加上与不加序列化差别不大…

基于真实山地场景下的超多目标优化算法求解无人机三维路径规划,MATLAB代码

超多目标优化算法是一类专门用于解决存在三个以上目标函数的最优化问题的算法。这类问题在现实世界中非常常见&#xff0c;例如在工程设计、资源管理、机器学习等领域。由于目标之间的冲突性&#xff0c;很难找到一个单一的解来同时优化所有目标&#xff0c;因此超多目标优化算…

MQ高级(二):死信交换机--延迟消息及DelayExchange插件--超时订单案例实现

目录 1.延迟消息 1.1.死信交换机和延迟消息 1.1.1.死信交换机 1.1.2.延迟消息 1.2.DelayExchange插件 1.2.1.下载 1.2.2.安装 1.2.3.声明延迟交换机 1.2.4.发送延迟消息 1.3.超时订单问题 1.3.1.定义常量 1.3.2.配置MQ 1.3.3.改造下单业务&#xff0c;发送延迟消息…

【Linux篇】TCP/IP协议(笔记)

目录 一、TCP/IP协议族体系结构 1. 数据链路层 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09;常用协议 ① ARP协议&#xff08;Address Resolve Protocol&#xff0c;地址解析协议&#xff09; ② RARP协议&#xff08;Reverse Address Resolve Protocol&…

详解Web测试和APP测试的区别

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 最近听到有些朋友说&#xff0c;移动端要比web端稍微难一些&#xff0c;涉及到的细节笔记要多&#xff0c;有转去做web测试的想法&#xff0c;看看在具体测试的…

秋招面试准备:《小米2024数字芯片岗面试题》

在数字芯片设计的浪潮中&#xff0c;验证工程师的角色愈发重要。他们如同守门人&#xff0c;确保每一块芯片在投入市场前都能稳定、高效地运行。小米&#xff0c;作为全球知名的智能设备制造商&#xff0c;对数字芯片岗位的人才选拔尤为严格。 本文分享《小米2024数字芯片岗面…

专属文生图助手——SD3+ComfyUI文生图部署步骤

SD3ComfyUI文生图部署步骤 我们使用DAMODEL来实现文生图的部署。 根据提供的操作步骤与代码段落&#xff0c;本文旨在介绍如何下载并部署 Stable Diffusion 3 模型&#xff0c;并通过 ComfyUI 架构实现基于 Web 界面的图像生成应用。本文将剖析各个步骤&#xff0c;并详细解释…