在ArkTS中如何将重复的代码抽离复用呢，我们可以通过组件化的思想来实现。
头部组件(自定义组件)
在项目的开发中，一般头部导航栏的内容都是复用的，我们可以通过组件的封装实现。
我们在右侧添加一个按钮组件，代替功能组件。
在这里 我们使用了Blank组件。 这个组件可以默认将中间的内容填补，更加方便做成我们两端对齐的效果。
Row(){
Text('商品列表')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Button('按钮')
.width(60)
.height(35)
}
.width('100%')
.height(30)
.margin({bottom: 20})
在ArkTS中封装组件有两种方式，一种是直接在当前ets文件中定义封装，第二种是做成一个组件文件。
当前文件定义
我们通过定义一个struct体来实现一个组件的复用。但是要注意我们的Text组件保证复用性应该是动态改变的，还有外边距，可以使用组件的时候单独设置。
@Component
struct Header{
private title: ResourceStr
build(){
Row(){
Text(this.title)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Button('按钮')
.width(60)
.height(35)
}
.width('100%')
.height(30)
}
}页面内定义的方法，定义好直接在页面中使用组件的名字使用就行了。发现跟之前的效果是一样的。
当然也可以对组件使用组件的通用样式，比如说宽度高度，边距等。
定义为单独文件
1.创建目录、文件
我们在ets目录下创建一个component目录，下面创建一个Header文件
2.将代码剪贴过去
我们将组件的代码剪贴过去，但是要注意，组件化的思想，我们需要将组件导入导出，所以需要export 这个组件。 使用export 语法导出
3.导入组件使用
导入header文件 会发现效果跟之前文件内使用是一摸一样的
卡片内封装(自定义构造函数)
我们在写代码的时候，为了实现功能，代码的复用性很差，写了很多重复的代码，我们可以将它优化一下，让代码变得更加直观一点。
在这里我们可以通过自定义组件的方式来完成。当然还有别的方法，比如使用自定义构造函数来实现。 他用来做一个独特页面的封装更加方便。
1.全局自定义构建函数
我们在页面组件外边定义的组件叫做全局自定义构建函数。
然后我们将重复的代码放进去。
我们发现他是报错的，因为在原本的代码循环结构中，有一个item，是没有代入的，所以我们需要代入item
我们直接在原先的地方使用就可以了 ，发现跟之前的效果是一样的。
代码结构清晰很多。
2.局部自定义构建函数
我们也可以将构建函数定义在内部，叫做局部自定义构建函数
我们将其放在组件末尾，但是注意，在使用局部自定义构建函数的时候，是不需要写function的
这时候我们发现上面调用组件的地方报错了,因为我们没有使用this，使用组件内部的方法，需要使用this来调用。 最后的结果也跟我们之前的是一样的。
自定义公共样式函数
我们代码中，重复的公共样式太多了，比如说什么width，height什么的呀，我们可以将公共样式封装起来，可以减少代码量，让代码变得更加清晰。
// 公共样式封装
@Styles function fillScreen(){
.width('100%')
.height('100%')
.backgroundColor('#efefef')
.padding(20)
}我们直接使用.函数 来使用它就发现跟之前一样了。
我们的 公共样式组件也可以写在页面内部，就是将function去掉 就可以了。
自定义私有样式组件
我们在开发的时候，发现有一些私有样式也产生了很多重复的代码
我们使用全局样式抽离的时候发现样式报错了。报错提示不是公共样式。 所以我们的全局样式封装，只能写所有组件的公共样式，不可以写私有样式。我们可以通过extend语法来实现。
注意，使用extends 封装私有样式只能写在全局，不可以写在局部。
// 全局私有样式封装
@Extend(Text) function priceText(){
.fontSize(18)
.fontColor('#ff0000')
}
最后发现跟我们的样式也是一样的，我们可以通过直接修改封装好的组件样式来做到集体修改的效果，也便于我们的操作。