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

译者：miaoYu

原文链接

当我们在使用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();

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

结论:

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