JS—Decorator(装饰者)模式

typescript常用编译结果函数__decorate、__matadata、__param、__awaiter typescript编译时,经常会生成一些工具函数,如__decorate、__matadata、__param、__awaiter,这些工具函数是用来执行一些typescript特性的,如装饰器、发射元数据、async/await等,下面是几个编译结果函数"use strict"; /* 获取{} */ console.log(this) /* 如果__decorate未定义则定义它,var声明... 阅读详情
http://taobaofed.org/blog/2015/11/16/es7-decorator/
转载自淘宝前端团队
装饰模式是装饰模式,是通过封装其他对象达到设计的目的。
装饰模式不一样,仅仅包装现有的模块,使之“更加华丽”,并不影响原有接口的功能——好比你给收集添加一个外壳罢了,并不影响手机原有的通话、充电等功能。
理解装饰模式——锦上添花
装饰模式是为了让不修改类原有的接口的情况下表现得更好
举例:水可以直接喝,加上其他果汁会更好喝。手机贴不贴膜都可以使用,但有些人就是喜欢加个外壳防摔。
装饰模式场景——面向AOP编程 AOP:面向切面编程
装饰模式经典的应用是AOP编程,比如“日志系统”,日志系统的作用是记录系统的行为操作,它在不影响原有系统的功能的基础上增加记录环节——好比你佩戴了一个智能手环,并不影响你的日常起居,但你现在却有了自己每天的行为记录。
更加抽象的理解,可以理解为给数据流做一层filter,因此AOP的典型应用包括安全检查、缓存、调试、持久化等等。
AOP编程应用场景:日志系统、辅助功能、安全检查、缓存、调试、持久化
以钢铁侠为例,钢铁侠本质是一个人,只是“装饰”了很多武器才变得那么NB,不过再怎么装饰它还是一个人。
示例场景:
首先创建一个普通的Man类,它的抵御值为2,攻击力为3,血量为3
然后我们让其带上钢铁侠的盔甲,这样他的抵御力增加100,变成102
让其带上光束手套,攻击力增加50,变成53
最后让为他增加“飞行”能力

这个代码IE8及以下不支持,IE9及以上没测试过

class Man{
			constructor(def = 2,atk = 3, hp = 3){
				this.init(def,atk,hp);
			}

			init(def,atk,hp){
				this.def = def; //防御力
				this.atk = atk; //攻击力
				this.hp = hp; //血量
			}
			toString(){
				return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
			}
		}

		var tony = new Man();
		console.log(`当前状态 ===> ${tony}`);

增加装饰者:(这里的代码和原博客有些不同,做了简化,便于理解)

//盔甲装饰
		function decorateArmour(target) {
 			target.def += 100;
		}
		//光束手套装饰
		function decorateLight(target) {
			target.atk += 50;
		}
		//增加飞行能力
		function decorateFly(target) {
			return target.toString() + ",Fly:true";
		}
		
		class Man{
		  constructor(def = 2,atk = 3,hp = 3){
		    this.init(def,atk,hp);
		  }


		  init(def,atk,hp){
		    this.def = def; // 防御值
		    this.atk = atk;  // 攻击力
		    this.hp = hp;  // 血量
		  }
		  toString(){
		    return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
		  }
		}
		var tony = new Man();
		decorateArmour(tony);
		decorateLight(tony);
		tony = decorateFly(tony);
		console.log(`当前状态 ===> ${tony}`);

关键:

装饰只针对特定对象,不针对原型。;

JavaScript装饰器函数(Decorator)实例详解 主要介绍了JavaScript装饰器函数(Decorator),结合实例形式分析了JavaScript装饰器函数(Decorator)的功能、实现与使用方法,需要的朋友可以参考下 立即下载

相关推荐

Arduino+esp8266+blinker物联网开发

文章目录blinker点灯一.简介二.开发环境的搭建1.arduino的安装2.添加esp8266开发板3. blinker库的导入4.驱动的安装4.手机端安装app三.开发第一个点灯程序1.添加设备2.载入示例3.代码部分4.代码讲解5.程序烧写四.总结 blinker点灯 一.简介 为了加深为物联网知识的认识,今天就教大家如何用手机app来控制我们的开发板。我们的开发环境是以arduino I...

weixin_45631738的博客 3万+

JS设计模式之装饰者模式

JS设计模式之装饰者模式

xu_ya_fei的专栏 480

Kaggle | 总奖池超200万美金的数学竞赛AIMO2冠军方案

••••结论1:通过结合高质量大规模数据集、工具集成推理和生成式选择方法,可以构建在挑战性数学问题上达到最先进水平的语言模型。本文的方法在 AIMO-2 竞赛中的胜利以及在多个数学基准上的 SOTA 结果验证了这一策略的有效性。结论2:发布 OpenMathReasoning 数据集、OpenMath-Nemotron 模型和代码是社区的宝贵财富。

hxshine的博客 1198

理解 JS 装饰器:@Decorator

Javascript 里的装饰器目前还处于stage-2阶段,借助 TypeScript 或者 Babel,已经有大量的优秀开源项目深度用上它了,比如:VS Code: 理解装饰器有助于帮助我们更好的看到这些优秀项目的源码核心思想。包括AOP,IoC,DI等编程思想: AOP 主要意图是将日志记录,性能统计,安全控制,异常处理等辅助功能逻辑代码从业务逻辑代码中解耦划分出来,将它们独立到非指导业务逻辑的方法中,进而改变这些行为的时候不影响业务逻辑的代码。 IoC 即控制反转 (Inversi...

薛定谔的猫-前端领域 3816

数学建模小白必看:层次分析法(AHP)从入门到实战(附Python代码)

本文详细介绍了层次分析法(AHP)在数学建模竞赛中的应用,从构建判断矩阵到一致性检验,再到权重计算和实战案例。通过Python代码实现,帮助小白快速掌握AHP的核心技巧,解决评价类难题,提升建模效率。

web39explorer的博客 919

四旋翼滑模控制:从理论到Simulink实现

本文深入探讨了四旋翼滑模控制的理论与Simulink实现,对比了其相较于PID控制在抗干扰和鲁棒性方面的显著优势。文章详细介绍了从精确动力学建模、内外环滑模控制器设计到指令解算的完整流程,并分享了Simulink仿真搭建、参数调试及抗扰性能验证的实战经验,帮助工程师掌握在复杂环境下提升四旋翼稳定性的进阶技能。

weixin_29163581的博客 375

js 装饰器_一文说透JS装饰器

装饰器是什么?装饰器(Decorator)是ES7中的一个提案,可能在将来会成为规范。许多面向对象的编程语言中都具有该项功能,如Java、Python等。装饰器本身是一种与类相关的语法,主要用来注释或修改类和类方法。许多面向对象的语言都支持这项功能。装饰器的作用?Decorator 如其名“装饰器”,可以对一些 对象 进行装饰然后返回一个被包装过的对象,可以被装饰的对象包括:类、类方法和访问器。通...

weixin_39966163的博客 456

OpenCode:开源代码智能代理平台的全面解析

OpenCode是一个开源代码智能代理平台,采用模块化微服务架构,支持多种AI模型集成。该系统包含前端交互层、代理服务层和模型集成层,提供Build、Plan和General三种代理模式,分别负责代码编写、分析和复杂任务处理。OpenCode支持跨平台安装,具备权限验证、上下文感知等安全机制,并集成LSP协议实现深度代码理解。相比竞品,其开源特性、终端优先设计和提供商无关架构具有明显优势,适用于个人开发、团队协作等多种场景,为开发者提供强大的AI辅助编程能力。

Aaron_945的博客 1425

Python装饰器(decorator)系列 --- 面向对象以及装饰器

类(class):是对现实世界中一些事物的封装 类中包含类的属性和类方法

zhf的博客 425

dToF直方图之美_deadtime死区时间

IMX459的死区时间可以在6ns,这个时间是什么级别,车载激光雷达激光器的光脉宽一般都在4ns以上,也就是这个时间贴近去SPAD的死区时间,这就导致了pile up会非常弱,不会有太多数量的光子计数堆积,加上某些SPAD设计,对TDC有一些更深入的考量,所以不需要去校正pile up算法。Sensor层面决定了pile up的复杂程度,如果一个dToF的SPAD一致性非常好,那么pile up校正可以简单到极致,也就是一句代码的事,比如IMX611,优秀到不需要后端去考虑校正pile up。

dream it possible 1436

Python爬虫实战:绕过Cloudflare反爬的最新技术与完整代码详解

在互联网数据采集领域,越来越多的网站开始部署CDN和安全防护服务,其中 Cloudflare 是最为广泛使用的防护方案之一。它不仅为网站提供DDoS防护,还能通过JS挑战、验证码和行为分析来识别并拦截爬虫。这给爬虫工程师带来了极大挑战——如何在不违反网站服务条款的情况下,实现有效的数据采集?本文将分享Python领域绕过Cloudflare反爬的最新技术方法,结合最新流行库与自动化浏览器,帮助你攻克这一难题。绕过Cloudflare反爬不是一蹴而就,需结合多技术、多策略,持续迭代。

2201_76125261的博客 2628

JS Decorator —— 装饰器(装饰模式)

一、简介 官方定义 随着TypeScript和ES6里引入了类,在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上。 注意  Javascript里的装饰器目前处在 提案阶段,在未来的版本中可能会发生改变。 属于一种设计模式,许多面向对象的语言都有这项功能。 特点 解耦 可以在不侵入到原有代码内部的情况下而通过标注的方式

张兴华的博客 1598

[QMT量化交易小白入门]-七十六、从tick数据中获取高频交易的量价背离信号

本专栏主要是介绍QMT的基础用法,常见函数,写策略的方法,也会分享一些量化交易的思路,大概会写100篇左右。QMT的相关资料较少,在使用过程中不断的摸索,遇到了一些问题,记录下来和大家一起沟通,共同进步。

木头大左的博客 792

javascript设计模式之Decorator(装饰者)模式

Decorator是一种结构型设计模式,用于促进代码复用,是一种可行的对象子类化的替代方案。Decorator提供了将行为动态添加到系统现有类的能力。其想法是,装饰者本身对于类原有的基本功能来说并不是必要的;否则,它就可以合并到超类本身。 装饰者可以用于修改现有的系统,希望在系统中为对象添加额外的功能,而不需要大量修改使用它们的底层代码。开发人员使用装饰者的一个原因是,应用程序可能包含需要大量不

vuturn的专栏 1048

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

javascript的装饰者模式Decorator

刚开始看这段代码有点绕,现在回过头来看,soeasy! Function.prototype.before = function(beforefn){ var _self = this; return function(){ beforefn.apply(this,arguments); //this指向beforefn retu...

weixin_30723433的博客 82

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Javascript模式系列 - 装饰者模式(Decorator)

<br /><br />转帖地址:http://www.cnblogs.com/liping13599168/archive/2009/01/11/1373677.html<br />前言<br />博客园谈设计模式的文章很多,我也受益匪浅,包括TerryLee、吕震宇等等的.NET设计模式系列文章,强烈推荐。对于我,擅长于前台代码的开发,对于设计模式也有一定的了解,于是我想结合Javascript来设计前台方面的“设计模式”,以对后台“设计模式”做个补充。开始这个系列我也诚惶诚恐,怕自己写得不好,不过我也

446

Javascript设计模式学习之Decorator(装饰者)模式

抽象decorator模式 使用jQuery的装饰者模式 jQuery.extend()允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象(和它们的属性)一起扩展(或合并)为一个单一对象。 定义三个对象: defaults、options、settings,目的是为了装饰defaults对象,将options的额外功能附加到d...

weixin_34375054的博客 97

ES7-Decorator-装饰者模式

装饰模式 仅仅包装现有的模块,使之 “更加华丽” ,并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了,并不影响手机原有的通话、充电等功能; 使用 ES7 的 decorator ES7 中增加了一个 decorator 属性,它借鉴自 Python 下面我们以 钢铁侠 为例讲解如何使用 ES7 的 decorator。 以钢铁侠为例,钢铁侠本质是一个人,只是“装饰”了很多武器方才变...

weixin_34014277的博客 426

《JavaScript设计模式》——9.12 Decorator(装饰者)模式

本节书摘来自异步社区《JavaScript设计模式》一书中的第9章,第9.12节, 作者: 【美】Addy Osmani 译者: 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。 9.12 Decorator(装饰者)模式 Decorator是一种结构型设计模式,旨在促进代码复用。与Mixin相类似,它们可以被认为是另一个可行的对象子类化的替代...

weixin_33948416的博客 157

09.Javascript设计模式之装饰器模式----Decorator

装饰器模式的概念 装饰器模式示例 第一个名词 第二个名词 第三个名词 第四个名词 大胆的开始测试 总结

Alien的专栏 2287

JAVA SCRIPT设计模式--结构型--设计模式之Decorator装饰模式(9)

JAVA SCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVA SCRIPT语言来实现主体功能,所以不可能像C++,JAVA等面向对象语言一样严谨,大部分程序都附上了JAVA SCRIPT代码,代码只是实现了设计模式的主体功能,不代表全部的正确,特此声明。若读者需要了解设计模式目录、原则、设计变化方向,环境相关等信息请查看设计模式开篇。​参与者: 动态地给一个对象添加一些额外的职责。就增加功能来说, Decorator模式相比生成子类 更为灵活。 有时我们希望给某个

火柴盒 345

Javascript乱弹设计模式系列(3) - 装饰者模式(Decorator)

前言 博客园谈设计模式的文章很多,我也受益匪浅,包括TerryLee、吕震宇等等的.NET设计模式系列文章,强烈推荐。对于我,擅长于前台代码的开发,对于设计模式也有一定的了解,于是我想结合Javascript来设计前台方面的“设计模式”,以对后台“设计模式”做个补充。开始这个系列我也诚惶诚恐,怕自己写得不好,不过我也想做个尝试,一来希望能给一些人有些帮助吧,二来从写文章中锻炼下自己,三来通过写文...

weixin_30952103的博客 90

性能监控体系搭建:从Prometheus部署到Spring Boot指标采集实战

性能监控是现代软件工程中的基础技术概念,通过收集系统运行时的关键指标数据来评估应用健康状态。其核心原理是基于数据采集、存储、分析和可视化四个环节构建完整监控链路,技术价值在于能够量化系统性能、快速定位瓶颈并指导优化决策。在应用场景上,性能监控广泛适用于微服务架构、高并发系统和资源密集型任务等场景。Prometheus作为开源监控解决方案,结合Grafana可视化工具,能够有效实现指标数据的采集与展示。在Spring Boot应用中,通过Actuator端点可以方便地暴露应用层性能指标,结合自定义业务指标监控

weixin_33946605的博客 555

ES7(ES2016)中的Decorator

Decorator,字面意思是修饰器。用来修饰啥呢? 类。先看一段代码index.js: let readOnly = function(target, name, descriptor){ descriptor.writable=false; return descriptor } class ClassA { @readOnly boo() { ...

惊蛰小鱼的博客 604

【Web前端】JavaScript设计模式全解析

JavaScript设计模式提供了解决常见开发问题的可复用方案,主要包括创建型、结构型和行为型三大类。创建型模式如单例模式确保唯一实例,工厂模式分离对象创建与使用;结构型模式如适配器解决接口兼容问题,装饰器动态扩展功能;行为型模式如观察者实现对象间通信,策略模式封装可变算法。JavaScript特有的模块模式利用闭包实现封装,混入模式支持多重继承。随着ES6引入类、Proxy等特性,传统模式实现更简洁,同时需注意避免过度设计,结合语言特性灵活运用。掌握这些模式能显著提升代码质量和可维护性。

宝青书坊 736

探索Nuxt Property Decorator:提升Vue组件开发的利器

探索Nuxt Property Decorator:提升Vue组件开发的利器 在现代Web开发中,Vue.js已经成为前端开发者的首选框架之一。而Nuxt.js作为Vue.js的框架,提供了更强大的功能和更简洁的开发体验。今天,我们要介绍的是一个在Nuxt.js开发中不可或缺的工具——Nuxt Property Decorator。 项目介绍 Nuxt Property Decorator是一个基...

gitblog_01026的博客 971
上一篇: JS——我的第三个AJAX程序(带数据库的用户名输入验证,模仿注册)
下一篇: JS—我的第四个AJAX程序(省市级联)
spfLinux
博客等级 码龄10年 117粉丝 307原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值