[CocosCreator]TS装饰器妙用

(老规矩:广告位留给自己)

欢迎喜欢或者从事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秒内被触发一次,并提供友好提示,简单好用!

小伙伴们,下期见!

[CocosCreator]TS装饰器妙用

猜你喜欢