【JS】装饰器让你的代码更简洁

当我们在使用JavaScript时,有时需要用到 setTimeout函数来强制代码延迟运行。比如:

setTimeout(() => {
  ...代码...
  // 这里的代码将延迟运行
}, 0);

我很讨厌这样写代码,我希望它变得简洁,所以我们可以把 setTimeout函数抽象成装饰器。

首先创建一个 timeout生成装饰器方法来简化我们的代码(TypeScript):

function  timeout( milliseconds:  number  =  0 ) {

    return  function( target, key, descriptor ) {

        var originalMethod =  descriptor.value;

        descriptor.value  =  function (...args) {

            setTimeout(() => {

                originalMethod.apply(this, args);

            }, milliseconds);

        };

        return descriptor;

    }

}

在 typescript 或者 babel 中装饰函数需要传三个参数:

target:

要么是被装饰函数的类的构造函数,要么是被装饰函数的实例原型

key:

被装饰函数的名称

descriptor:

被装饰函数的所有属性

这里我们需要传入一个数值作为参数(默认为0),所以我们需要使用装饰器工厂模式。

装饰器工厂模式就是一个普通的函数,这个函数运行时会返回装饰器的函数表达式。

接下来,我们得到被装饰的函数,然后重写它,创造一个包裹 setTimeout的新函数。

好了,我现在可以这样使用装饰器了:

class  DemoComponent {

    constructor() {}

    @timeout()
    demoMethod() {
    // 这里的代码会延迟执行
    }

    // 传入数值
    @timeout(2000)
    demoMethod() {
        // 这里的代码会延迟执行
    }

}

new  DemoComponent().demoMethod();

这代码看起来是不是灰常简洁! ?.

结论:

装饰器非常强大,它不仅仅适用于各种框架也适用于各种类库,所以在你的代码中试试吧。


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券