JavaScript修饰器-让代码更干净

2019年9月4日 126次阅读 来源: cipchk

一般在JavaScript中为了让部分代码延迟执行，一想起的自然是 setTimeout，比如：

setTimeout(() => {
  // doing
}, 0);

这种代码或许你不知道写过多少遍，但，我们在 setTimeout 中多数情况下会去调用另一个方法：

setTimeout(() => {
  this.fn();
}, 0);

你会发现，我们一直都在重复写着 setTimeout，再套用一个匿名函数，最后才真正去编写我们需要执行的方法。我越来越讨厌这种写法，老是写着一些无关系要多余的代码。

使用Angular的同学对 @Component 不陌生，里面大量的使用这种ES7才会有的“修饰器”。

修饰器是一个函数，用于修改类行为。

那， 应该怎么编写一个更干净的 setTimeout，比如，我希望这样来编写我的timeout：

@timeout(1000)
fn() {
  // doing
}

this.fn();

对应的 timeout 修饰器代码：

// timeout.ts
export function timeout(milliseconds: number = 0) {
  return function(target, key, descriptor) {
    // value 值相当于上面示例中 `change` 方法。
    var orgMethod = descriptor.value;
    descriptor.value = function(...args) {
      setTimeout(() => {
        orgMethod.apply(this, args);
      }, milliseconds);
    };
    return descriptor;
  }
}

target：实例对象，即 IndexComponent 实例化对象。
key：方法名称，即 _fn_。
descriptor：对象描述，同Object.getOwnPropertyDescriptor() 。

怎么样，这样子写的代码是不是更酷？

修饰器目前只能在ES7才会有，但一些在Typescript、Babel等转码器已经被支持，特别是Angular2应用中更是给予非常重要的地位。而且应用范围可以非常广，比如类、类方法和属性。

结论

以上只是一个很简单的修饰器示例，你可以根据需要生产一些有意思的修饰器，让编写的代码更优雅、更干净。完整示例。

    原文作者：cipchk
    原文地址: https://segmentfault.com/a/1190000008604544
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞