HarmonyOS Development: Code Extraction in DevEcoStudio

Foreword

this article is based on DevEco Studio 5.0.5 Release

there is such a scene, when you initially write UI, you do not consider the following code reuse, and want to extract a repeated component attribute into a method? How to quickly implement? Take another common scenario, a function, you have written a lot of code, you want to quickly extract a part of the code into a separate function, used to simplify the current code logic, how to quickly implement? Perhaps many old irons will think of it in the first place and copy the code. What's the difficulty? Although manual copying can be implemented, it is a waste of time. This article will tell you a convenient way to implement it, that is, code extraction in DevEcoStudio.

To give a very simple example, the following code, how to quickly extract the properties set by the Text component into a function call?

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("我是测试内容1")
        .fontColor(Color.Red)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

It's very simple, just select the attribute you want to Extract, right-click and select Refactor, then select Extract Method... and it will automatically Extract into an extended component style function.

The results are as follows:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("我是测试内容1")
        .newExtend()
    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}


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

the dynamic effects are as follows:

after executing the Extract Method, the extended style function has a box. We can change the name of the Method, and it will automatically synchronize the generated function to make changes.

One thing to note is that if you are a private attribute, that is, the component itself, it will generally directly generate a function decorated with @ Extend. If it is a common attribute, it can be extracted as a function decorated with @ Styles or @ Extend.

As shown below, I selected the common attribute, and I can see that the generation options to be selected are given:

Extract new Method/function (Method)

in the preface, we simply cited an example to quickly implement the component's attribute function generation, this extraction method is method extraction, in addition, in the actual development, we can not only extract attributes, but also extract components.

We can Extract a duplicate component to facilitate reuse of pages or simplify the code level. The extraction is also very simple, which is the same as the extraction of attributes. Select the range of components you want to Extract, right-click to select Refactor, and then select Extract Method... It will automatically be extracted into a function decorated by @ Builder.

You can select Global or Current Page:

the generated code is as follows:

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

  @Builder
  newLocalBuilder() {
    Text("test 1")
      .fontColor(Color.Red)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
  }
}

the above is for component or component properties extraction, the same, if you want to extract the logic of a method into a new method is also supported, the use of the same as above, are selected to extract the code.

For example, I want to extract the following piece of code:

the code after extraction is as follows:

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

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

of course, the above is just a simple case, in the actual development, please also combine the business to extract.

Extract variables/constants

the extraction of variables and constants is also very simple. Refactor is selected by right-clicking, Extract Variable is selected for variables, and Extract Constant is selected for constants. For example, I want the following code to Extract a Variable:

after the extraction the code is as follows, similarly, there is also a box where you can modify the variable name synchronously.

Constants and variables are different only keywords. Constants are const and variables are let.

Related Summary

in fact, we can see that there is also an interface extraction, which supports the extraction of selected object arguments into interfaces. The usage is as follows:

because the current ArkTs no longer supports this syntax, we generally do not write in this way, so we can ignore this.

The above usage method supports shortcut buttons. The system is different, and the shortcut keys set by oneself are different, and the shortcut methods are also different. When you choose, there are prompts on the right, just remember.

This article label: Hongmeng Development Tools/DevEco Studio