鸿蒙ArkTS语言学习（五）：扩展（函数）@Extend&@Styles&@Builder

如何实现结构、样式复用呢？

@Extend：扩展组件（样式、事件）

作用：将相同组件复用的属性结构抽取封装，将不同的结构通过传入参数进行修改。

1. 定义语法
@Extend(组件名) function 函数名{ ... }
2. 调用
组件名.函数名（参数...）
3. 例子：
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
  .onclick(()=>{})
}
Text('Fancy')
 .fancy(16)
Text('Fancy')
  .fancy(24)

1. @Extend仅支持在全局定义，不支持在组件内部定义。只能在当前文件内使用，不支持export。
2. @Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
3. @Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
4. @Extend装饰的方法的参数可以为function，作为Event事件的句柄。???
5. @Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

@Styles：抽取通用属性、事件

不同的组件具有通用的属性或事件，将通用的属性或事件抽取出来进行封装。

// 全局
@Styles function functionName() { ... }

// 在组件内；尤其是利用this时一定要定义在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}

1. 当前@Styles仅支持通用属性和通用事件。
2. @Styles方法不支持参数
3. @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。只能在当前文件内使用，不支持export。
4. 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值
5. 组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

@Builder：自定义构建函数（结构、样式、事件）

除了组件、样式、事件外，还可以封装结构。结构的复用。用于封装相似的结构。


可以全局也可以局部。

//全局自定义构建函数
定义的语法：
@Builder function MyGlobalBuilderFunction() { ... }
使用方法：
MyGlobalBuilderFunction()
如果不涉及组件状态变化，建议使用全局的自定义构建方法。

//局部
定义的语法：
@Builder MyBuilderFunction() {}
使用方法：
this.MyBuilderFunction()

1. @Builder通过按引用传递的方式传入参数，才会触发动态渲染UI，并且参数只能是一个。

2. @Builder如果传入的参数是两个或两个以上，不会触发动态渲染UI。

3. @Builder传入的参数中同时包含按值传递和按引用传递两种方式，不会触发动态渲染UI。

4. @Builder的参数必须按照对象字面量的形式，把所需要的属性一一传入，才会触发动态渲染UI。