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 事件通知
  • 扩展修饰器,实现 节流、防抖、权限申请

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

相关推荐
猫猫不是喵喵.1 分钟前
vue 脚手架解决跨域问题
前端·javascript·vue.js
不能只会打代码14 分钟前
六十天前端强化训练之第三十一天之Webpack 基础配置 大师级讲解(接下来几天给大家讲讲工具链与工程化)
前端·webpack·node.js
_十六25 分钟前
TS 的 unknown 与 any:安全与灵活的平衡点
前端·typescript
三小河33 分钟前
tailwindcss @4和@3版本项目引入,及自定义配置
前端·javascript·vue.js
雪球工程师团队35 分钟前
用一句话完成回归测试——多模态大模型与Prompt工程在前端自动化中的融合探索
前端·架构·测试
用户5457483417736 分钟前
Harmonyos5应用开发实战——地图组件集成与定位功能实现(part1)
harmonyos
用户5457483417736 分钟前
Harmonyos5应用开发实战——订单页面开发(part2)
harmonyos
用户5457483417739 分钟前
Harmonyos5应用开发实战——地图组件集成与定位功能实现(part2)
harmonyos
关山月41 分钟前
React 中的静态渲染 SSG
前端
SuperherRo1 小时前
Web开发-JS应用&微信小程序&源码架构&编译预览&逆向调试&嵌套资产&代码审计
前端·javascript·微信小程序·源码·逆向