(老规矩:广告位留给自己)
欢迎喜欢或者从事CocosCreator开发的小伙伴请加入我的大家庭CocosCreator游戏开发Q群:26855530
首先,让我了解什么是装饰器(cp:网上一段材料)
装饰器(Decorator) 仅提供定义劫持,能够对类及其方法、方法入参、属性的定义并没有提供任何附加元数据的功能。主要是为了提供附加的功能。
其实按我个人理解,他就类似Java里常说的代理模式:在不影响代理目标对象的前提下,完成对代理对象的增强,简单理解就是AOP,再简单点就是补刀!
好了废话多说.上正菜:
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秒内被触发一次,并提供友好提示,简单好用!
小伙伴们,下期见!