wrapBuilder 全局封装@Builder的使用姿势 原创

🎯 wrapBuilder 全局封装@Builder的使用姿势

⭐⭐⭐

往期

• @Builder装饰器：自定义构建函数 @Builder装饰器的讲解
• @LocalBuilder装饰器： 维持组件关系 @LocalBuilder装饰器的讲解
• @BuilderParam： 引用@Builder函数 @BuilderParam装饰器的讲解

📌 见解

1️⃣ 初始化只能使用全局的@Builder方式

2️⃣ 对象的builder属性方法仅限在struct内部使用

3️⃣ 适合抽离项目固定使用的ui, 抽离后可在项目中开箱即用，当然也可以用Map用关键字映射你封装所有的组件，利用get的方式获取组件更加简洁

4️⃣ 初始化的参数类型要与@Builder形参严格匹配

🧩 拆解

// BuilderConstEnum.ets
export enum BuilderConstEnum {
  BUILDER_ONE = 'BuilderOne',
  BUILDER_TWO = 'BuilderTwo'
}

// WrapBuilders.ets
import { BuilderConstEnum } from './BuilderConst'

@Builder
function BuilderOne(name: string, age: number) {
  Text(`我叫${name}今年${age}BuilderOne`)
}

@Builder
function BuilderTwo(name: string, age: number) {
  Text(`我叫${name}今年${age}BuilderTwo`)
}

// TODO: 当组件非常多的时候可以将枚举写入循环，最后在遍历设置组件即可
export const builderArr: Map<string, WrappedBuilder<[string, number]>> = new Map()

builderArr.set(BuilderConstEnum.BUILDER_ONE, wrapBuilder(BuilderOne))
builderArr.set(BuilderConstEnum.BUILDER_TWO, wrapBuilder(BuilderTwo))

// Index.ets
import { BuilderConstEnum } from './BuilderConst'
import { builderArr } from './WrapBuilders'

@Entry
@Component
struct WrapBuilderCase {
  build() {
    Column() {
      // 参数需要严格匹配
      builderArr.get(BuilderConstEnum.BUILDER_ONE)?.builder('汉堡黄', 100)
    }
    .width('100%')
    .height('100%')
  }
}

📝 拥有组件的抽象思维能减少许多冗余代码，有时候写代码也是一种“艺术🎨”的表现

🔚 至此：Builder相关终章

🌸🌼🌺