javascript可以实现装饰者模式吗

Javascript中,装饰器是一种用于修饰类(class)、方法、属性的装饰,装饰器目前是第2阶段的提议,这意味着它们应该成为该语言将来更新的一部分。让我们看看什么是装饰器,以及如何使用它们来使您的代码更整洁,更易于理解。

什么是装饰器?

装饰器以其最简单的形式只是将一段代码与另一段代码包装在一起的一种方式-实际上就是“修饰”它。您可能以前已经听说过这个概念,即功能组合或高阶功能。

在标准Javascript中,对于许多用例,这已经可以实现,只需调用一个函数来包装另一个函数即可:

function fn(name) { console.log(`Hello, ${name}`))}function decorator(fn) { return function() { console.log('Starting') const result = wrapped.apply(this, arguments) console.log('Finished') return result }}const wrapped = decorator(fn)

本示例中, wrapped函数通过decorator函数并返回,它与fn函数执行完全相同的操作。不同之处在于,它将在调用包装函数之前和之后进行一些日志记录:

fn('Jack')// Hello, Jackwrapped('Jack')// Starting// Hello, Jack// Finished

如何使用Javascript装饰器

装饰器在Javascript中使用一种特殊的语法,在装饰器中将前缀一个@符号并放置在装饰代码的最前面。

注意:装饰器目前处于“Stage 2 Draft ”阶段,这意味着它们大部分已经完成,但仍可能会发生变化。

可以根据需要在同一代码上使用多个装饰器,它们将按照声明它们的顺序应用。

例如:

@log@immutableclass Example { @observable price = 0 @observable amount = 1 constructor(price) { this.price = price } @computed get total() { return this.price * this.amount; }}

这定义了一个类,并应用了三个装饰器-两个装饰器本身,三个装饰器属性:

  • @log 记录对类的所有访问日志信息
  • @immutable可以使类不可变-在新的实例中使用Object.freeze使其不可改变
  • @observable 该属性为观察属性
  • @computed 该属性为计算属性

在当前的浏览器或Node.js版本中,尚不支持装饰器,因此我们使用使用Babel插件@babel/plugin-proposal-decorators来将它转换为浏览器或Node.js中可识别的代码。

为什么要使用装饰器

尽管在Javascript中已经可以进行功能组合,但是将相同的技术应用于其他代码段(例如,类和类属性)要困难得多。

装饰器提案增加了对可用于解决这些问题的类和属性装饰器的支持,在以后的Javascript版本可能会为其他麻烦的代码区域添加装饰器支持。

装饰器还允许使用更简洁的语法,以便在代码周围应用这些包装,从而减少对您编写代码的影响。

装饰器的应用范围

当前仅支持类和类的成员上的装饰器类型。这包括属性,方法,getter和setter。

实际上,装饰器不过是返回另一个函数的函数。在程序首次运行时,将会使用这些装饰器函数来包装需要装饰后的代码,并将包装后的代码作为返回值。

类装饰器

将类修饰符一次性应用于整个类定义。装饰器函数使用单个参数调用,该参数是要装饰的构造函数。

请注意,这适用于构造函数,而不适用于所创建类的每个实例。

回到我们的日志记录示例,让我们编写一个记录构造函数参数的示例:

function log(Class) { return (...args) => { console.log(args) return new Class(...args) }}

在这里,我们接受一个类作为参数,并返回一个将用作构造函数的新函数。这里的装饰器只打印了构造函数中的参数,并返回使用这些参数构造的类的新实例。 然后,我们在类中使用这个log函数

@logclass Animal { constructor(name, age) { this.name = name this.age = age }}const cat = new Animal('Hello kitty', 2)// ["Hello kitty", 2]console.log(cat.name)// Hello kitty

如果想为装饰器@log传入自定义参数,则需要在log中返回一个本身就是装饰器的函数:

function log(name) { return function decorator(Class) { return (...args) => { console.log(`log for ${name}: `, args) return new Class(...args) } }}@log('cat')class Animal { constructor(name, age) { this.name = name this.age = age }}const cat = new Animal('Hello kitty', 2)// log for cat: ["Hello kitty", 2]console.log(cat.name)// Hello kitty

类成员装饰器

类成员装饰器应用于类中的单个成员-无论它们是属性,方法,getter或setter。该装饰器被调用时需要有以下三个参数:

  • target:要修改属性的对象。
  • name:要修改的属性的名称。
  • descriptor:要修改的属性描述符。从本质上讲,这是应该传递给Object.defineProperty的对象。

类属性装饰器

这里使用的经典示例是@readonly。可以简单地实现为:

function readonly(target, name, descriptor) { descriptor.writable = false return descriptor}

这里将对象属性描述符writable标志更改为false。然后将其用于类属性,如下所示:

class Animal { @readonly age = 2}const cat = new Animal()// {age: 2}

当我们尝试修改age时,我们发现,在控制台中有以下错误输出:main.js:16 Uncaught TypeError: Cannot assign to read only property 'age' of object '#<e>'

类方法装饰器

同样,我们来实现一个在调用类方法之前,打印一些日志信息:

function log(target, name, descriptor) { const original = descriptor.value if (typeof original === 'function') { descriptor.value = function(...args) { console.log(`log for args: ${args}`) try { return original.apply(this, args) } catch (e) { console.log(`Error: ${e}`) throw e } } } return descriptor}

然后,我们在类方法中使用它:

class Animal { constructor(name) { this.name = name } @log sayHello(name) { console.log(`Hello ${name}, I'm ${this.name}`) }}const cat = new Animal('Hello kitty')cat.sayHello('Jack')// log for args: Jack// Hello Jack, I'm Hello kitty

同样,我们可以为装饰器@log传入自定义参数,则需要在log中返回一个本身就是装饰器的函数:

function log(name) { return function decorator(target, name, descriptor) { const original = descriptor.value if (typeof original == 'function') { descriptor.value = function(...args) { console.log(`log for ${name}: `, args) // ... } } return descriptor }}

但是当我们将装饰器log进行分解时,我们会得到:

  • 一个具有单个参数名为name的函数
  • 该函数返回了一个装饰器函数

实际运用

例如,在react-redux库中,我们使用connect函数将React组件连接到Redux中, 通常,将使用以下方法:

class Page extends React.Component {}export default connect(mapStateToProps, mapDispatchToProps)(Page)

但是,由于装饰器语法的工作方式,我们可以用以下代码替换它以实现完全相同的功能:

@connect(mapStateToProps, mapDispatchToProps)export default class Page extends React.Component {}

装饰器为您编写出非常干净和易于理解的代码提供了一种全新的方法,而且它非常简单就可以实现。

使用它的唯一限制是您的想象力!!!


如果你觉得这篇文章对你有帮助,欢迎关注微信公众号-前端学堂,更多精彩文章等着你!

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 3月 9日 上午11:28
下一篇 2023年 3月 9日 上午11:41

相关推荐

  • 通过智选华为手机找到了重生之路

    点击右上方“关注”,第一时间获取科技资讯、技能攻略、产品体验,私信我回复“01”,送你一份玩机技能大礼包。 —————&…

    2023年 3月 18日
  • “日本小户型之神”:如何打造房子小而温馨的和谐美好居住环境?

    很多人去日本居住的第一感觉是 房子都不大, 但是小而温馨 每一处空间都得到了 恰到好处的运用 这样和谐美好的居住环境 既离不开日本人细腻的生活方式 也归功于日本的建筑设计师们 说到…

    2022年 12月 9日
  • 我建议,2023年、2024年、2025年,女人们不要再过双11、双12了

    我建议, 女人们在2023年、2024年, 不要再过双11、双12了。 因为, 双11、双12这些日子本来就不是节日, 都是商家为了收割一波韭菜而创造出来的节日。 很多女人都会等到…

    2022年 12月 9日
  • 摄影圈的黑话你知多少,摄影界黑话

    今天有人问我:打鸟、小痰盂、老法师等等术语是什么意思,算是摄影圈的“黑话”吗?今天我就给大家讲讲摄影圈常见的“黑话”,希望对大家有帮助。 一、相机黑话 ①无敌兔:无敌兔是佳能5D2…

    2023年 3月 19日
  • 人教版四年级英语下册parta练习

    点击上方蓝标收听朗读音频 主播 廖俊华老师 零基础学英语 四年级英语下册 培优课堂 第1课时 单词领读 培优课堂,专为零学英语爱好者量身定做,帮助大家圆英语梦想!名师执教:廖俊华 …

    2023年 1月 16日
  • 帮你快速掌握头像基础设计知识的软件

    编辑导语:随着互联网的发展,各种社交软件也在不断地更新迭代,头像可以说是社交软件中尤其重要的一个设计。本文作者分享了有关产品头像的基础设计知识,讲述了头像元素的方方面面,感兴趣的一…

    2022年 12月 11日
  • 人教版三年级下册数学小数的初步认识教学

    【教学设计】 小数的初步认识 一 、教学内容: 人教版三年级下册教科书P88~89例1。 二、 教学目标: 1.结合生活经验认识小数,会认、读小数部分不超过两位的小数,初步理解以元…

    2023年 5月 8日
  • 铁甲小宝里的警察姐姐

    《铁甲小宝》,这部电视剧对于90后来说一定不陌生了,绝对是青春期记忆中非常特别的存在。当时这个类型的作品非常少,所以一开播就吸引住观众的眼球,铁甲小宝卡布达和小伙伴们的友情让大家十…

    2022年 11月 21日
  • 大河屯镇党委书记

    “成绩属于过去,挑战就在眼前。今年的任务将会更加艰巨,工作也会更加繁琐。我一定会把过去的成绩当做新的工作起点,继续发扬吃苦耐劳,不屈不挠的工作精神,虚心学习他人长处,刻苦钻研业务知…

    2023年 3月 22日
  • 关于三八妇女节的由来简单

    三八妇女节的由来可以追溯到上世纪八十年代,在那个时期,全球的妇女都在支持和推动妇女平等权利的运动。1982年,第三个世界妇女大会在智利召开,其中有若干著名的妇女权利活动家,如德国的…

    2023年 5月 14日