【HarmonyOS 5】鸿蒙的装饰器原理和自定义装饰器

GeorgeGcs
• 阅读 5

##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财# 一、鸿蒙中的装饰器是什么? 在ArkTS中装饰器(Decorator)是一种特殊的声明,能够对类、方法、属性等进行标注和修改。 因为ArkTS 是TypeScript 扩展而来的编程语言,TypeScript 支持装饰器特性。它属于元编程的一种工具,可在不改变原有代码结构的基础上,为其添加额外的功能。比如在鸿蒙开发里,装饰器能够用来定义组件的属性、生命周期方法等。像@Component装饰器就用于把一个类标记成鸿蒙的组件类。 鸿蒙中的装饰器有状态装饰器V1和V2(@State、@Prop、@Link、@ObservedV2等等)。组件装饰器@Entry,@CustomDialog,@Component,@Builder等等。 详情参见官方文档: 状态管理(V1) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-management-v1 状态管理(V2) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-management-v2 二、装饰器的基本原理 ArkTS通过装饰器的方式,调用函数实现。在不侵入原有代码结构的基础上,进行扩展。 装饰器一般分为三种:类装饰器,方法装饰器,属性装饰器。 类装饰器在类之上声明,接收类的构造函数作为参数,可用于修改类的构造函数、添加类的属性和方法,或者对类进行一些元数据的标注:

function logDecorator(constructor: Function) { console.log(Class ${constructor.name} is created.); }

@logDecorator class MyComponent { constructor() { console.log('MyComponent instance is created.'); } }

const myComponent = new MyComponent();

方法装饰器应用于类的方法,在方法被定义时执行。它接收三个参数:目标对象、方法名和方法描述符。方法装饰器可以用于修改方法的行为,比如添加日志、进行权限验证、实现节流防抖等功能。在OpenHarmony开源系统中,对照系统相机源码,可看到以下自定义方法类如下所示。但是在HarmonyOS中,ArkTS对any强类型校验不通过。目前这种写法无法使用。

/*

  • Copyright (c) 2023 Huawei Device Co., Ltd.
  • Licensed under the Apache License, Version 2.0 (the "License");
  • you may not use this file except in compliance with the License.
  • You may obtain a copy of the License at
  • http://www.apache.org/licenses/LICENSE-2.0
  • Unless required by applicable law or agreed to in writing, software
  • distributed under the License is distributed on an "AS IS" BASIS,
  • WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  • See the License for the specific language governing permissions and
  • limitations under the License.
  • /

import { Log } from '../../utils/Log';

const TAG = '[Decorators]:'

export function debounce(timeout: number) { return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) { let curFunc: number = 0; const original = descriptor.value; descriptor.value = function (...args: string[]) { Log.log(${TAG} debounce invoke ${propKey} curFunc: ${curFunc}); curFunc && clearTimeout(curFunc); curFunc = setTimeout(() => original.call(this, ...args), timeout); }; }; }

export function throttle(waitTime: number) { return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) { let lastTime: number = 0; const original = descriptor.value; descriptor.value = function (...args: string[]) { let curTime = Date.now(); Log.log(${TAG} throttle invoke ${propKey} timeInterval: ${curTime - lastTime}); if (curTime - lastTime >= waitTime) { original.call(this, ...args); lastTime = curTime; } }; }; }

属性装饰器应用于类的属性,在属性被定义时执行。它接收两个参数:目标对象和属性名。属性装饰器可以用于修改属性的访问器,比如添加属性验证逻辑、实现属性的缓存等。 但是在HarmonyOS中,ArkTS对any强类型校验不通过。目前这种写法无法使用。

function positiveNumber(target: any, propertyKey: string) { let value: number; const getter = function () { return value; }; const setter = function (newValue: number) { if (newValue < 0) { throw new Error(${propertyKey} must be a positive number.); } value = newValue; }; Object.defineProperty(target, propertyKey, { get: getter, set: setter, enumerable: true, configurable: true }); }

class MyModel { @positiveNumber age: number = 20; }

const myModel = new MyModel(); myModel.age = -1; // 会抛出异常

三、在HarmonyOS中如何自定义装饰器 综上所述,在HarmonyOS中有特殊的ArkTS语法规则,any unknown这些不能使用。所以我们需要通过Object代替targe的any类型。 PropertyDescriptor中的value值也是any,直接按照ts的语法是没问题。但是在ArkTS中我们需要曲线实现目标,通过Function的形式获取value属性的值,再将target: Object, key: string, descriptor: PropertyDescriptor通过...args的形式赋值。 ...args 是 JavaScript 和 TypeScript(ArkTS 基于 TypeScript)中的剩余参数(Rest Parameters)语法。 在HarmonyOS中定义类装饰器的方式如下所示,自定义属性装饰器同理:

// 自定义方法装饰器:记录方法调用信息 function methodLogger(target: Object, key: string, descriptor: PropertyDescriptor) { const originalMethod: Function = descriptor.value; descriptor.value = (...args: Object[]) => { // 获取被装饰方法的名称、入参、返回值 console.log(Calling ${target.constructor.name} method ${key} with argument: ${args}) const result: Object = originalMethod(...args) console.log(Method ${key} returned: ${result}) return result } return descriptor; }

@Entry @Component struct DecoratorDemoComponent { @State message: string = 'Hello HarmonyOS';

// 使用自定义装饰器 @methodLogger private processData(input: string): string { console.log('正在处理数据...'); return 处理后的数据:${input.toUpperCase()}; }

// 组件显示时触发方法调用 aboutToAppear() { const processedResult: string = this.processData('decorator demo'); console.log('最终结果:', processedResult); this.message = processedResult; }

build() { Column({ space: 30 }) { Text(this.message) .fontSize(24) .margin(10);

  Button('点击触发方法')
    .onClick(() => this.processData('button click'))
    .margin(10);
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center);

} }

点赞
收藏
评论区
推荐文章
GeorgeGcs GeorgeGcs
19小时前
【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解
【HarmonyOS5入门系列】鸿蒙HarmonyOS示例项目讲解\鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言:移动开发声明式UI框架的技术变革在移动操作系统的发展历程中,UI开发模式经历了从命令式到声明式的重大变革。根据
GeorgeGcs GeorgeGcs
19小时前
【HarmonyOS 5】AttributeModifier和AttributeUpdater区别详解
【HarmonyOS5】AttributeModifier和AttributeUpdater区别详解\鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、AttributeModifier和AttributeUpdater的定义和作用1
GeorgeGcs GeorgeGcs
13小时前
从“备胎”到领航者,鸿蒙操作系统的传奇进化
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财【HarmonyOS5】2019年,在全球科技产业的风云变幻中,华为正式推出了鸿蒙操作系统(HarmonyOS),这一消息如同一颗重磅炸弹,瞬间吸引了全世界的目光。彼时,外界对鸿蒙的诞生背
GeorgeGcs GeorgeGcs
10小时前
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言在HarmonyOS5的应用开发模型中,featureAbility是旧版FA模型(FeatureAbility)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文
GeorgeGcs GeorgeGcs
10小时前
【HarmonyOS NEXT】鸿蒙应用实现手机摇一摇功能
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言手机摇一摇功能,是通过获取手机设备,加速度传感器接口,获取其中的数值,进行逻辑判断实现的功能。在鸿蒙中手机设备传感器@ohos.sensor(传感器)的系统API监听有以下:@oh
GeorgeGcs GeorgeGcs
10小时前
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言在HarmonyOS5的应用开发模型中,featureAbility是旧版FA模型(FeatureAbility)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文
GeorgeGcs GeorgeGcs
10小时前
【HarmonyOS 5】鸿蒙中如何使用MQTT
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、MQTT是什么?MQTT(MessageQueuingTelemetryTransport,消息队列遥测传输)是一种轻量级、基于发布/订阅(Publish/Subscribe)模式的即
GeorgeGcs GeorgeGcs
10小时前
【HarmonyOS 5】鸿蒙中@State的原理详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、@State在鸿蒙中是做什么的?@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式。通过将变量标记为@State
GeorgeGcs GeorgeGcs
9小时前
【HarmonyOS 5】如何开启DevEco Studio热更新调试应用模式
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、AttributeModifier和AttributeUpdater的定义和作用1.AttributeModifier是ArkUI组件的动态属性,提供属性设置功能。开发者可使用attr
GeorgeGcs GeorgeGcs
9小时前
【HarmonyOS 5】makeObserved接口详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、makeObserved接口是什么?makeObserved接口(APIversion12起可用)用于将非观察数据转为可观察数据,适用于三方包类、@Sendable装饰的类、JSON.
GeorgeGcs
GeorgeGcs
Lv1
男 · 金融头部企业 · 鸿蒙应用架构师
HarmonyOS认证创作先锋,华为HDE专家,鸿蒙讲师,作者。目前任职鸿蒙应用架构师。 历经腾讯,宝马,研究所,金融。 待过私企,外企,央企。 深耕大应用开发领域十年。 AAE,Harmony(OpenHarmony\HarmonyOS),MAE(Android\IOS),FE(H5\Vue\RN)。
文章
56
粉丝
1
获赞
2