讲装饰器的文章一抓一大把,这里就不详细描述了。装饰器只可以修饰类和类属性。
1.安装tslib
tslib是一个的运行时库,其中包含所有TypeScript辅助函数。
该库需要在tsconfig中的开启--importHelpers标志使用.
项目目录下: npm i tslib
2.配置tsconfig
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noEmitHelpers": true,
"sourceMap": true,
"importHelpers": true,
"experimentalDecorators": true,
"baseUrl": ".", //必需,否则paths配置不会生效
"paths": {
"tslib": [
"tslib/tslib.d.ts"
]
}
}
3.装饰器例子
装饰类属性的时候,就需要在装饰函数中使用三个参数:target
、name
、descriptor
,分别代表了需要修饰的目标类、目标属性、目标属性的描述符。
写装饰器的时候一定要弄清楚this
指向的几种规则:
- 当一个函数使用
new
操作符来调用的时候,在函数内部this
指向了新创建的对象。 - 当使用
call
或apply
调用函数的时候,this
指向了call
或apply
指定的第一个参数。如果第一个参数是null
或者不是一个对象的时候,this
指向全局对象。 - 当函数作为对象里面的属性被调用的时候,在函数内部的
this
指向了对应的对象。 - 最后就是默认规则,默认
this
指向全局对象,在浏览器便是Window。但是在严格模式下是为undefined
的。
/**
* 函数节流装饰器
* @param wait: 节流时间
*/
export function throttle(wait: number) {
let previous = 0;
return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
const oldValue = descriptor.value
descriptor.value = function (...args) {
const now = Date.now();
if (now - previous > wait) {
oldValue.apply(this, args)
previous = now;
}
};
return descriptor
}
}
/**
* 函数去抖动装饰器(立即执行版)
* @param wait: 去抖时间
*/
export function debounce(wait: number) {
let timeout;
return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
const oldValue = descriptor.value
descriptor.value = function (...args) {
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) oldValue.apply(this, args)
};
return descriptor
}
}
4.使用方法
优雅的节流器使用方法
@throttle(500)功能:限制触发该函数后500ms后才能再次触发.应用场景: 通常可以用来限制过快的点击的回调.
@debounce(500)功能:限制触发该函数后500ms内没有调用过才能再次触发(立即执行版). 应用场景: 通常可以用来限制mousemove事件,输入框输入事件等.他们触发的很频繁,这个时候函数没必要一直执行.函数防抖就是让事件触发的n秒内只执行一次,如果连续触发就重新计算时间.
@throttle(500)
private onTimeBtn() {
DialogView.show({content: i18n("确认刷新当前商店吗?"),
okFunc: Laya.Handler.create(this, () => {
this.refreshShop();
})
})
}