TS下的装饰者模式(Decorator)

2018-10-12 admin

1.1、装饰者模式

装饰者模式就是动态的给类或对象增加功能的设计模式。在程序运行时动态的给一个具备基础功能的类或对象添加新的功能,并且不会改变会破坏基础类和对象的功能。先提炼出产品的最小可用产品,再通过快速迭代的方式添加功能。

1.2、Typescript下的实现

Javascript里的装饰器目前处在建议征集的第二阶段,不被浏览器所支持,如果想要提前使用这个新特性就需要Babel,Typescript等工具进行转译。这里介绍Typescript下的用法。

首先在全局安装typescript

npm install typescript -g

然后新建一个后缀为.ts的typescript文件,这里我们新建一个demo.ts

class Greeter {
    constructor() {}
    greet(subject:any) {
        console.log(`hello ${subject}!`);
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

将ts文件编译为js运行

tsc demo.ts --target ES5 --experimentalDecorators
# 如果本地没安装node可以把demo.js中的代码复制到chrome控制台测试
node demo.js

运行结果

hello decorator!

下面给它加上一个装饰器,使greet方法能够在成功执行后做一个日志记录

class Greeter {
    constructor() { }
    @logSuccess
    greet(subject: string) {
        console.log(`hello ${subject}!`);
    }
}
function logSuccess(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        func.apply(target, args)
        console.log(`greet successfully!`)
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

编译后运行结果 运行结果

hello decorator!
greet successfully!

正如我们所见Greeter的原方法greet()在执行完之后执行了console.log(greet successfully!)

logSuccess(target,key,descriptor)为什么需要传入这三个参数?Decorators的实现使用了ES5的 Object.defineProperty 方法,这三个参数也和这个方法的参数一致。装饰器的本质就是一个函数语法糖,通过Object.defineProperty来修改类中一些属性,descriptor参数也是一个对象,是针对key属性的描述符,里面有控制目标对象的该属性是否可写的writable属性等。

接下来我们将该日至系统简单完善一下

除了打印该方法执行成功,再添加对其运行时错误的日志输出

class Greeter {
    constructor() { }
    @log
    greet(subject: string) {
        console.log(`hello ${subjects}!`);
    }
}
function log(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        try {
            func.apply(target, args)
            console.log(`greet successfully!`)
        } catch (err) {
            console.log(`greet error : ${err}`)
        }
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

这里我们特意使用了一个未声明的变量subjects来触发一个错误 查看运行结果

greet error : ReferenceError: subjects is not defined

这样就实现了一个简单的日志系统

1.3 装饰者模式与工厂函数

如果想对不同的对象应用同一个decorator,但同时又需要通过传参来控制一些差别(装饰器器函数需要保留(target,key,descriptor)三个参数),这时就需要工厂函数来帮我们生成一个装饰器函数。

通过装饰器来使一个属性变得只读👇

class Greeter {
    constructor() { }
    @readonly(true)
    demo() {
        console.log(`i am readonly`)
    }
}
function readonly(readonly: boolean) {
    return function (target: any, key: any, descriptor: any) {
        descriptor.writable = !readonly
    }
}
const greet = new Greeter();
greet.demo = function () {
    console.log(`new greet`)
}
greet.demo()

输出结果

i am readonly

多个装饰器可以叠加作用

class Greeter {
    constructor() { }
    @readonly(false)
    @readonly(true)
    demo() {
        console.log(`i am readonly`)
    }
}
function readonly(readonly: boolean) {
    return function (target: any, key: any, descriptor: any) {
        descriptor.writable = !readonly
    }
}
const greet = new Greeter();
greet.demo = function () {
    console.log(`new greet`)
}
greet.demo()

输出结果

new greet

当有多个装饰器同时作用在一个对象的属性上时👇:

@g()
@f()
method (){}

叠加效果类似这样g(f(method))

1.4 装饰器作用在类上

作用在类上的装饰器中的参数target不再是类的prototype,而是类本身,因此他也没有keydescriptor两个属性。

下面的装饰器给Greeter类动态增加了greet()函数

@decrator()
class Greeter {
    constructor() { }
    greet?: any
}
function decrator() {
    return function (target: any) {
        console.log(target.prototype)
        if (target.prototype && !target.prototype.greet) {
            target.prototype.greet = function () {
                console.log(`hello decrator!`)
            }
        }
    }
}
const greet = new Greeter();
if (greet.greet) {
    greet.greet()
}

输出

Greeter {}
hello decrator!

这里有同学可能对原型链的知识不太了解或者生疏了,简单提醒一下👇

//构造函数
function Cons(){}
//对象实例
const cons = new Cons();

Cons.prototype === cons.__proto__;  // true
Cons.prototype.constructor === Cons;  // true

原型链的教程可以参考一下prototype对象

原文链接:https://segmentfault.com/a/1190000016653914

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42492.html

文章标题:TS下的装饰者模式(Decorator)

相关文章
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
回到顶部