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

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();

/*
 * 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;
      }
    };
  };
}

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; // 会抛出异常

// 自定义方法装饰器：记录方法调用信息
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);
  }
}