鸿蒙5.0开发【ArkUI动态组件与组件工厂的最佳封装策略】

本文链接：https://blog.csdn.net/2401_82772199/article/details/140954440

引言

本篇整理项目开发中关于组件封装的最佳实践。探讨ArkUI中组件的动态操作技巧，以及如何通过工厂封装模式来优化组件的创建和管理，从而提升开发效率和应用性能。

“ArkUI 组件封装场景”

在应用开发过程中，不同的业务场景可能需要使用相同功能和样式的Arku!组件。例如，登录页面登录按钮和购物页面结算按钮可能样式相同，部分实现不同。该场景常用方法是抽取相同样式部分，并将其封装成一个自定义组件到公共组件库中。在业务场景开发时，统一从公共组件库获取封装好的公用组件。

动态组件封装

1. 传统组件封装示例，普遍但不推荐

示例一段简单的代码，封装一个自定义按钮

@Component
struct CusButton {
  @Prop text: string = ""
  @Prop buttonType: ButtonType
  // ...穷举所有Button独有属性

  build() {
    Button(this.text)
      .fontSize(12)
      .fontColor(Color.Black)
      .type(this.buttonType)
    // 穷举Button其他独有的属性赋值
  }
}

在使用 CusButton 组件时，若需修改组件显示内容text 和按钮类型buttonType 时，需要以参数的形式传入:

@Component
struct Index {
  @State buttonType: ButtonType = ButtonType.Normal

  build() {
    // 入参包含 CusButton 组件中定义的全部Button独有属性
    CusButton({ text: '测试按钮', buttonType: this.buttonType, ... })
  }
}

缺点:

使用方式无法为链式调用
刷新性能影响大
入参多，不利于维护，系统组件如果属性发生变化，则需要同步修改

2. 采用 ‘AttributeModifier’ 进行组件封装

对于‘动态属性’组件的封装，我们推荐使用 AttributeModifier，对上述代码进行改造，如下：

第一步：新建类实现 AttributeModifier 接口，作为属性修改器

class CusButtonModifier implements AttributeModifier<ButtonAttribute> {
  private buttonType: ButtonType = ButtonType.Normal;

  applyNormalAttribute(instance: ButtonAttribute): void {
    instance.stateEffect(true)
    instance.type(this.buttonType)
    instance.height(50)
    instance.fontSize(20)
  }

  toggleType(): CusButtonModifier {
    if (this.buttonType === ButtonType.Normal) {
      this.buttonType = ButtonType.Capsule
    } else {
      this.buttonType = ButtonType.Normal
    }
    return this;
  }
}

解释说明：

ButtonAttribute ： AttributeModifier<T> 内泛型的具体类型。T 代表组件的属性类，用来标识进行属性设置的组件的类型，比如Button组件的ButtonAttribute，Text组件的TextAttribute等。
toggleType：小编自定义的一个示例方法，提供外部调用，用于展示按钮样式属性修改；带返回值是为了提供链式调用能力。

第二步：使用 CusButtonModifier 进行属性修改

@Component
struct Index {
  @State modifier: CusButtonModifier = new CusButtonModifier();

  build() {
    Button('Test AttributeModifier Button')
      .attributeModifier(this.modifier)
      .onClick(() => {
        // 这里调用 属性修改器 修改属性
        this.modifier.toggleType()
      })
  }
}

效果如下：

优势：

将属性修改逻辑与业务逻辑分离，降低了组件间的耦合度；
通过集中管理属性修改逻辑，使得代码更易于理解和维护
AttributeModifier 可以被设计为通用组件，用于多个不同的场景和项目中

组件工厂封装

组件工厂封装是一种设计模式，用于创建和管理组件的实例，以提高代码的可维护性、可扩展性和复用性。

1. 使用 `wrapBuilder` 封装组件工厂

// UI1、UI2 是组件提供者
@Builder
function UI1(text: string) {
  Text(text).fontColor(Color.Green)
}
@Builder
function UI2(text: string) {
  Text(text).fontColor(Color.Blue)
}

// 定义组件工厂Map
let factoryMap: Map<string, object> = new Map();

// 将需要工厂化的组件存入到组件工厂中
factoryMap.set('UI1', wrapBuilder(UI1))
factoryMap.set('UI2', wrapBuilder(UI2))

//导出组件工厂
export { factoryMap }

2. 通过 `WrappedBuilder` 使用组件工厂

@Component
struct TestComponentFactory {
  build() {
    Column({ space: 10 }) {
      (factoryMap.get('UI1') as WrappedBuilder<[string]>).builder('工厂组件 - 1');
      (factoryMap.get('UI2') as WrappedBuilder<[string]>).builder('工厂组件 - 2');
    }
  }
}

运行效果如下：

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。