本文介绍了如何在Vue中使用装饰器（@debounce和@throttle）来实现函数的节流与防抖。通过示例展示了如何在类的方法上应用这些装饰器，以及在Vue组件中使用它们。此外，还提供了lodash的节流和防抖函数作为装饰器的实现，并分享了个人前端开发的经验和学习资源。
}, 100)
}
const myClass = new MyClass()
// 多次调用只会输出一次
myClass.follow()
myClass.follow()
上面是一个防抖的例子，我们通过debounce函数将另一个函数包起来，实现了防抖的功能，这时候再有另一个需求，比如希望在调用follow函数前后各打印一段日志，这时候我们还可以再开发一个log函数，然后继续将follow包装起来
/**
- 最外层是防抖，否则log会被调用多次
*/
class MyClass {
follow = debounce(
log(function() {
console.log(‘关注我’)
}),
100
)
}
上面代码中的debounce和log两个函数，本质上是两个包装函数，通过这两个函数对原函数的包装，使原函数的行为发生了变化，而js中的装饰器的原理就是这样的，我们使用装饰器对上面的代码进行改造
class MyClass {
@debounce(100)
@log
follow() {
console.log(‘关注我’)
}
}
装饰器的形式就是 @ + 函数名，如果有参数的话，后面的括号里面可以传参
=========================================================================
装饰器本质上依然是一个函数，不过这个函数的参数是固定的，如下是防抖装饰器的代码
/**
*@param wait 延迟时长
*/
function debounce(wait) {
return function(target, name, descriptor) {
descriptor.value = debounce(descriptor.value, wait)
}
}
// 使用方式
class MyClass {
@debounce(100)
follow() {
console.log(‘关注我’)
}
}
我们逐行去分析一下代码
最低0.47元/天 解锁文章
2047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
