装饰器(Decorator) 仅提供定义劫持,能够对类及其方法、方法入参、属性的定义并没有提供任何附加元数据的功能。主要是为了提供附加的功能。
1.要使用装饰器需要配置使用条件,即在tsconfig.json里确保最低支持ES5版本以及启用experimentalDecorators编译器,如下:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
2.装饰器含有五种类型,分别是添加在类、属性、方法、参数和访问者头上的@修饰符;主要功能就是在运行时,观察或是修改它们的装饰对象。
Class Decorator (类修饰器) Property Decorator (属性修饰器) Method Decorator (方法修饰器) Parameter Decorator(参数修饰器) Accessor Decorator (存取修饰器) 今天主要讲的重点是方法修饰器,也是使用最多的,其他的也类似,有兴趣的小伙伴自行学习就好了
/**
* 按钮点击限制节流
* @param lockTime 阻塞时间
* @param callBackFun 节流回调
*/
export function ButtonLock(lockTime: number = 0.3, callBackFun?: Function) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
let oldFun: Function = descriptor.value;
let isLock: boolean = false;
descriptor.value = function (...args: any[]) {
if (isLock) {
if (callBackFun) {
callBackFun();
}
return
}
isLock = true;
setTimeout(() => {
isLock = false
}, lockTime * 1000);
oldFun.apply(this, args);
}
return descriptor
}
}
这是我写的按钮限流装饰器,他的作用是防止用户点击过快所使用的,代码本生很简单,就是在进入时把代码锁住,在指定时间内无法继续访问目标函数,以达到限流的效果.
其中:
target:当前对象的原型链,以 Persion 类为例,它就是 Person.prototype
propertyKey:方法的名字:如 getFullName
descriptor:方法的描述,也就是Object.getOwnPropertyDescriptor(Person.prototype, propertyKey)
定义完我们的装饰器,只要在我们的按钮函数上使用既可以
@ButtonLock(1, () => {
cc.log("操作太快了,请稍后再试");
})
buttonEvent(event: cc.Event.EventCustom, customEventData: string) {
event.stopPropagation();
cc.log("按钮逻辑");
}
效果就是:该按钮只能在1秒内被触发一次,并提供友好提示,简单好用! ————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。