HarmonyOS ：扩展修饰器，实现节流、防抖、权限申请

2024-11-29
北京
本文字数：2249 字
阅读完需：约 7 分钟

引言

防重复点击，利用装饰器面向切面（AOP）的特性结合闭包，实现节流、防抖和封装权限申请。

节流

节流是忽略操作，在触发事件时，立即执行目标操作，如果在指定的时间区间内再次触发了事件，则会丢弃该事件不执行，只有超过了指定的时间之后，才会再次触发事件。

添加节流功能，封装修饰器，创建一个 ts 文件：

export function Throttle(period: number): MethodDecorator {  return function (      target: any,      propertyKey: string,      descriptor: PropertyDescriptor  ): PropertyDescriptor {    const originalMethod = descriptor.value    let timeID: number = 0    descriptor.value = function (...args: any[]): void {      if (timeID === 0) {        originalMethod.apply(this, args)        timeID = setTimeout(() => {          timeID = 0        },          period        )      }    }    return descriptor  }}

复制代码

使用方式：

// 示例如下，2秒内多次点击只会触发第一次@Throttle(2000)onClickTap(name: string) {  // consolve.log(name)  this.count++}

复制代码

防抖

防抖是延时操作，在触发事件时，不立即执行目标操作，而是给出一个延迟的时间，如果在指定的时间区间内再次触发了事件，则重置延时时间，只有当延时时间走完了才会真正执行。

添加防抖功能，封装修饰器，创建一个 ts 文件：

export function Debounce(period: number): MethodDecorator {  return function (      target: any,      propertyKey: string,      descriptor: PropertyDescriptor  ): PropertyDescriptor {    const originalMethod = descriptor.value    let timeID: number = 0    descriptor.value = function (...args: any[]): void {      if (timeID !== 0) {        clearTimeout(timeID)      }      timeID = setTimeout(() => {        originalMethod.apply(this, args)        timeID = 0      },        period      )    }    return descriptor  }}

复制代码

使用方式：

// 示例如下，2秒内多次点击只会触发最后一次@Debounce(2000)onClickTap(name: string) {  // consolve.log(name)  this.count++}

复制代码

扩展，使用修饰器，处理权限申请

直接上代码，创建一个 ts 文件，封装修饰器，实现权限申请的能力。

关键代码如下：

export function Permission(    context: common.UIAbilityContext,     permissions: Permissions[]) {  return function (      target: any,      propertyKey: string,      descriptor: PropertyDescriptor  ) {    const originalMethod = descriptor.value;    descriptor.value = function (...args: any[]) {      checkPermission(permissions)        .then((grantStatusList: abilityAccessCtrl.GrantStatus[]) => {          console.log('权限校验结果:', grantStatusList)          const allPermissionsGranted =            grantStatusList.every(status => status === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED)          if (allPermissionsGranted) {            return originalMethod.apply(this, args)          }          // 如果没有权限，请求权限          requestPermission(permissions, context)            .then(() => {              // 获取权限成功后重新调用方法              return originalMethod.apply(this, args)            })            .catch(() => {              // 获取权限失败，执行用户注入的处理函数或默认处理逻辑              const errorHandler = target.permissionErrorHandler || defaultPermissionErrorHandler              errorHandler()            })        })        .catch((error) => {          const errorHandler = target.permissionErrorHandler || defaultPermissionErrorHandler          errorHandler()        })    }    return descriptor  }}

复制代码

使用方式：

// 在 UI 布局中通过使用修饰器使用@Permission(    getContext(this) as common.UIAbilityContext,    ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])onClickTap(name: string) {  // 授权成功后，才会进入方法内执行 count++  this.count++}
permissionErrorHandler() {  FastToast.shortToast('请求权限失败')}