【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();复制代码

这代码看起来是否是灰常简洁！ 😎.

结论:

装饰器很是强大，它不单单适用于各类框架也适用于各类类库，因此在你的代码中试试吧。

原文：medium.com/front-end-h…