随着页面复杂程度提高，页面中会有很多的样式&结构代码，其中难免重复的部分，如果可以提取出来重复使用，就可以提升编码效率，减少重复代码，提升代码可读性。

咱们来来学习3 种样式&结构复用的语法：

1. @Extends：扩展组件（样式、事件）
2. @Styles: 抽取通用属性、事件
3. @Builder：自定义构建函数（结构、样式、事件）

@Extend

作用：通过 Extend 可以扩展组件的样式、事件,实现复用效果

使用方法

// 1. 定义在全局
@Extend(组件名) 
function functionName(参数1....) {
  .属性()
  .事件(()=>{})
}


// 2. 使用
组件名(){}
  .functionName(参数1...)

注意

① 扩展的组件和使用的组件同名，比如 @Extend(Text) ,那么后续通过 Text 才可以点出该扩展

② function 的名字不能与组件本身拥有的属性同名，自身属性优先级更高

例如：Text组件上本身自带有一个fontStyle属性，我们就不能再@Extend(Text) function fontStyle()一个同名方法了

@Styles

同于@Extend 用来给某个组件扩展，@Styles 可以抽取通用的事件和属性

作用：@Styles扩展通用样式和事件给多个组件使用

使用方法

// 全局定义
@Styles function functionName() {
  .通用属性()
  .通用事件(()=>{})
}


@Component
struct FancyUse {
  // 在组件内定义
  @Styles fancy() {
      .通用属性()
      .通用事件(()=>{})
  }
}


// 使用
        组件()
            .fancy()
        组件()
        .functionName()

注意：

1. 不同于@Extend @Styles 不支持传递参数
2. 可以继续添加样式覆盖 @Styles 中定义的内容
3. 组件内部写法，可以通过 this访问组件属性

@Builder

抽取整个结构，可以应用与多个组件，也被称为自定义函数

使用方法

// 自定义 全局 构建函数
@Builder function MyGlobalBuilderFunction(param1,param2...) {
  // 结构、属性、事件放这里
}
// 使用
MyGlobalBuilderFunction(param1,param2...)

// 自定义 组件内 构建函数
@Builder MyBuilderFunction( param1,param2...) {
  // 结构、属性、事件放这里
}
// 使用
this.MyBuilderFunction(param1,param2...)

@Extend @Styles @Builder三者比较

| 名称 | 参数 | 作用 | | --- | --- || --- | | @Extend | 可传参 | 仅用于一个组件，且有相同的属性，抽取特定组件的样式，事件 | | @Styles | 不可传参 | 可用于多个组件，但仅限于共同的属性（width，height，background等），抽取组件通用的的样式，事件 | | @Builder | 可传参 | 可用于多个组件，抽取组件的结构，样式，事件 |