JavaScript润饰器-让代码更清洁

2024年5月21日 266次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞