前言

本文基于DevEco Studio 5.0.5 Release

有這樣的一個(gè)場(chǎng)景，當(dāng)你初始寫UI的時(shí)候，沒有考慮到后面的代碼復(fù)用，想要把一段重復(fù)的組件屬性進(jìn)行抽成一個(gè)方法？該如何快速的執(zhí)行？再舉一個(gè)常見的場(chǎng)景，一個(gè)函數(shù)，你寫了很多的代碼，想要把一部分代碼，快速的抽成一個(gè)單獨(dú)的函數(shù)，用于簡(jiǎn)化當(dāng)前的代碼邏輯，如何快速的實(shí)現(xiàn)？可能很多老鐵會(huì)第一時(shí)間想到，把代碼復(fù)制出來唄，這有什么難的？雖然手動(dòng)復(fù)制出來可以實(shí)現(xiàn)，但是未免太浪費(fèi)時(shí)間了，本篇文章就告訴大家一個(gè)便捷的方式來實(shí)現(xiàn)，那就是DevEcoStudio中的代碼提取。

舉一個(gè)很簡(jiǎn)單的例子，如下代碼，如何快速的把Text組件設(shè)置的屬性，快速的抽成一個(gè)函數(shù)調(diào)用呢？

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("我是測(cè)試內(nèi)容1")
        .fontColor(Color.Red)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

很簡(jiǎn)單，只需要選中你要抽取的屬性，右鍵選擇Refactor，然后選擇Extract Method...即可，它便會(huì)自動(dòng)抽成一個(gè)擴(kuò)展組件樣式函數(shù)。

執(zhí)行結(jié)果如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("我是測(cè)試內(nèi)容1")
        .newExtend()
    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}


@Extend(Text)
function newExtend() {
  .fontColor(Color.Red)
  .fontSize(16)
  .fontWeight(FontWeight.Bold)
}

動(dòng)態(tài)效果如下：

在執(zhí)行完Extract Method之后，擴(kuò)展樣式函數(shù)是帶有方框的，我們可以在方法上進(jìn)行更改名字，它會(huì)自動(dòng)同步生成的函數(shù)進(jìn)行更改。

有一點(diǎn)需要說明，如果你是私有的屬性，也就是組件本身自己的屬性，一般它會(huì)直接生成@Extend修飾的函數(shù)，如果是通用屬性，可提取為@Styles或@Extend裝飾的函數(shù)。

如下所示，我選中的是通用的屬性，就可以看到給出要選擇的生成選項(xiàng)：

提取新方法/函數(shù)（Method）

在前言中，我們簡(jiǎn)單列舉了一個(gè)例子，快速實(shí)現(xiàn)了組件的屬性函數(shù)生成，這種提取方式，就是方法提取，除此之外，在實(shí)際的開發(fā)中，我們不僅可以提取屬性，也可以提取組件。

我們可以把一個(gè)重復(fù)的組件進(jìn)行提取，方便頁(yè)面進(jìn)行復(fù)用，或者簡(jiǎn)化代碼層級(jí)，都可以進(jìn)行對(duì)組件的提取，提取也是很簡(jiǎn)單，和屬性的提取是一樣的，選中你要提取的組件范圍，右鍵選擇Refactor，然后選擇Extract Method...即可，它便會(huì)自動(dòng)抽成一個(gè)@Builder修飾的函數(shù)。

你可以選擇全局或者當(dāng)前頁(yè)面中：

生成的代碼如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      this.newLocalBuilder()
    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  newLocalBuilder() {
    Text("我是測(cè)試內(nèi)容1")
      .fontColor(Color.Red)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
  }
}

以上呢是針對(duì)組件或者組件的屬性進(jìn)行提取，同樣的，如果你想把一個(gè)方法中的邏輯提取成一個(gè)新的方法也是支持的，使用方式和上面一樣，都是選中要提取的代碼。

比如我想把下面的一段代碼進(jìn)行提?。?/p>

提取之后代碼如下：

add(a: number, b: number): number {
    return this.newMethod(a, b)
  }

  private newMethod(a: number, b: number): number {
    return a + b
  }

當(dāng)然了，以上呢只是簡(jiǎn)單的案例，在實(shí)際的開發(fā)中，還請(qǐng)結(jié)合業(yè)務(wù)進(jìn)行提取。

提取變量/常量

變量和常量的提取也是十分的簡(jiǎn)單，都是通過右鍵選擇Refactor，變量的話選擇Extract Variable，常量選擇Extract Constant，比如我要下面的代碼抽成一個(gè)變量：

提取之后代碼如下，同樣的，也有一個(gè)方框，你可以同步進(jìn)行修改變量的名字。

常量和變量唯獨(dú)關(guān)鍵字不一樣，常量是const，變量是let。

相關(guān)總結(jié)

其實(shí)我們看到，還有一個(gè)接口提取，也就是支持選中對(duì)象自變量進(jìn)行提取成接口，使用方式如下：

因?yàn)槟壳暗腁rkTs已經(jīng)不支持這種語(yǔ)法了，一般我們也不會(huì)這樣去寫，所以這個(gè)大家忽略即可。

以上的使用方式是支持快捷按鈕的，系統(tǒng)不一樣，還有自己設(shè)置的快捷鍵不一樣，其快捷方式也不一樣，大家在選擇的時(shí)候，右邊都有提示，記住即可。

本文標(biāo)簽：鴻蒙開發(fā)工具/DevEco Studio