【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();这代码看起来是不是灰常简洁！ ?.
结论:
装饰器非常强大，它不仅仅适用于各种框架也适用于各种类库，所以在你的代码中试试吧。
往期精选文章 |
|---|
使用虚拟dom和JavaScript构建完全响应式的UI框架 |
扩展 Vue 组件 |
使用Three.js制作酷炫无比的无穷隧道特效 |
一个治愈JavaScript疲劳的学习计划 |
全栈工程师技能大全 |
WEB前端性能优化常见方法 |
一小时内搭建一个全栈Web应用框架 |
干货：CSS 专业技巧 |
四步实现React页面过渡动画效果 |
让你分分钟理解 JavaScript 闭包 |
小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2017-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录