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

引言

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

节流

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

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

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
  }
}

使用方式：

ts 复制代码

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

防抖

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

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

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
  }
}

使用方式：

ts 复制代码

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

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

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

关键代码如下：

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
  }
}

使用方式：

ts 复制代码

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

permissionErrorHandler() {
  FastToast.shortToast('请求权限失败')
}

重点总结

装饰器可以持有当前方法的对象

附注（Example）

Demo示例（基于API11开发，支持NEXT及以上版本运行）已上传可供参考，包含如下内容：

静态库+动态包+多模块设计
状态管理
统一路由管理（router+navPathStack）
网络请求、Loading 等工具库封装
自定义组件、自定义弹窗（解耦）
EventBus 事件通知
扩展修饰器，实现节流、防抖、权限申请

"本文正在参加华为鸿蒙有奖征文征文活动"