0
点赞
收藏
分享

微信扫一扫

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

律楷粑粑 2024-12-02 阅读 19

引言

防重复点击,利用装饰器面向切面(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('请求权限失败')
}

重点总结

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

之前使用 dart 的扩展语法实现过防抖,节流能力 (链接地址), ArkTs 官方文档一直没有找到类似的实现方案,在此感谢下方掘友的灵感和示例。

参考文档:https://juejin.cn/post/7365717663292375079

附注(Example)

Demo 示例已上传:

GitHub:https://github.com/liyufengrex/HarmonyAtomicService

GitCode:https://gitcode.com/liyufengrex/HarmonyAtomicService

(基于API11开发,支持NEXT及以上版本运行)已上传可供参考,包含如下内容:

  • 静态库+动态包+多模块设计
  • 状态管理
  • 统一路由管理(router+navPathStack)
  • 网络请求、Loading 等工具库封装
  • 自定义组件、自定义弹窗(解耦)
  • EventBus 事件通知
  • 扩展修饰器,实现 节流、防抖、权限申请
  • 动态路由 (navPathStack + 动态import + WrappedBuilder)
  • UI动态节点操作 (BuilderNode + NodeController)
  • 折叠屏适配示例
  • 组件工厂示例
  • 组件动态属性设置示例
  • 云函数、云数据库使用示例
  • 华为账号服务示例(快速登陆、快速验证手机号)
举报

相关推荐

0 条评论