通常在JavaScript中为了让部分代码延迟执行,一想起的天然是 setTimeout
,好比:app
setTimeout(() => { // doing }, 0);
这种代码或许你不知道写过多少遍,但,咱们在 setTimeout
中多数状况下会去调用另外一个方法:函数
setTimeout(() => { this.fn(); }, 0);
你会发现,咱们一直都在重复写着 setTimeout
,再套用一个匿名函数,最后才真正去编写咱们须要执行的方法。我愈来愈讨厌这种写法,总是写着一些无关系要多余的代码。this
使用Angular的同窗对 @Component
不陌生,里面大量的使用这种ES7才会有的“修饰器”。code
修饰器是一个函数,用于修改类行为。对象
那, 应该怎么编写一个更干净的 setTimeout
,好比,我但愿这样来编写个人timeout:ip
@timeout(1000) fn() { // doing } this.fn();
对应的 timeout
修饰器代码:get
// 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() 。io
怎么样,这样子写的代码是否是更酷?function
修饰器目前只能在ES7才会有,但一些在Typescript、Babel等转码器已经被支持,特别是Angular2应用中更是给予很是重要的地位。并且应用范围能够很是广,好比类、类方法和属性。匿名函数