File structure

Zova provides a flexible file structure that can be gradually adjusted according to the complexity of the business, always maintaining the simplicity and elegance of the code, which is more conducive to continuous iteration and maintenance of the code

Three-level iteration

The file structure of a page can refer to the following three iterations:

Name	Description
Single-File	Controller(1)
Three-File	Controller(1) + Render(1) + Style(1)
More-File	Controller(1) + Render(n) + Style(n) + Service(n)

Single-File

In the initial stage of business development, there is relatively little code, and a single file can be used

class ControllerPageCounter {
  count: number = 0;
  cTextCenter: string;

  protected async __init__() {
    this.cTextCenter = this.$style({
      textAlign: 'center',
    });
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  protected render() {
    return (
      <div class={this.cTextCenter}>
        <div>count: {this.count}</div>
        <button onClick={() => this.increment()}>Increment</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

Three-File

When the code starts to grow, you can separate the Render and Style

Create first Render Bean

First, separate out the Render

1. CLI command

$ zova :refactor:firstRender page/counter --module=demo-student

2. Menu command

TIP

Context Menu - [Module Path/src/page/pageName]: Zova Refactor/Create First Render Bean

@Render()
class RenderPageCounter extends BeanRenderBase {
  public render() {
    return (
      <div class={this.cTextCenter}>
        <div>count: {this.count}</div>
        <button onClick={() => this.increment()}>Increment</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

Create first Style Bean

Then separate out the Style

1. CLI command

$ zova :refactor:firstStyle page/counter --module=demo-student

2. Menu command

TIP

Context Menu - [Module Path/src/page/pageName]: Zova Refactor/Create First Style Bean

@Style()
class StylePageCounter extends BeanStyleBase {
  cTextCenter: string;

  protected async __init__() {
    this.cTextCenter = this.$style({
      textAlign: 'center',
    });
  }
}

More-File

As the code continues to grow, you can continue to adjust the file structure, create more Render files and Style files, and also create multiple Service files to separate state management

Create Another Render Bean

1. CLI command

$ zova :refactor:anotherRender page/counter another --module=demo-student

2. Menu command

TIP

Context Menu - [Module Path/src/page/pageName]: Zova Refactor/Create Another Render Bean

Create Another Style Bean

1. CLI command

$ zova :refactor:anotherStyle page/counter another --module=demo-student

2. Menu command

TIP

Context Menu - [Module Path/src/page/pageName]: Zova Refactor/Create Another Style Bean

Create Another Service Bean

Create a Service counter to separate state management

1. CLI command

$ zova :create:bean service page/counter/counter --module=demo-student

2. Menu command

TIP

Context Menu - [Module Path/src/page/pageName]: Zova Create/Service

@Service()
class ServiceCounter extends BeanBase {
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}