Блог

Главная - Вопросы по программированию - Stencil.js — Отдельные проблемы между пользовательским интерфейсом и логикой

Stencil.js — Отдельные проблемы между пользовательским интерфейсом и логикой

#javascript #typescript #jsx #stenciljs #separation-of-concerns

Вопрос:

Этот вопрос вдохновлен соглашением об использовании крючков реагирования для решения отдельных проблем.

Можно ли было бы включить аналогичную систему с использованием трафарета?

Это первоначальная идея, она вдохновлена Services соглашением Angular:

1. Создайте обычный компонент трафарета:

 import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'my-app-component'
})

export class MyAppComponent {
  @State() color: string = 'blue';

  private changeColorToRed() {
    this.color = 'red';
  }

  private changeColorToBlue() {
    this.color = 'blue';
  }

  render() {
    return (
      <div>
        <button onClick={this.changeColorToRed}>Red</button>
        <button onClick={this.changeColorToBlue}>Blue</button>
        <p>Selection: {this.color}</button>
      </div>
    );
  }
}

2. Отдельные методы в MyAppService.ts :

 export default class MyAppService {
  color: string;

  constructor({ color }) {
    this.color = color;
  }

  changeColorToRed() {
    this.color = 'red';
  }

  changeColorToBlue() {
    this.color = 'blue';
  }
}

3. Измените компонент трафарета, замените методы обслуживанием:

 import { Component, State, h } from '@stencil/core';

import MyAppService from './MyAppService.ts';

@Component({
  tag: 'my-app-component'
})

export class MyAppComponent {
  private service;

  @State() color: string = 'blue';

  connectedCallback() {
    this.service = new MyAppService({ color: this.color }); 
  }

  render() {
    return (
      <div>
        <button onClick={this.service.changeColorToRed}>Red</button>
        <button onClick={this.service.changeColorToBlue}>Blue</button>
        <p>Selection: {this.color}</button>
      </div>
    );
  }
}

Хотя это может сработать для простого примера, я не уверен, что это правильное соглашение для этого, и я не уверен, что реактивность сохранена, так как я только инициализирую Службу connectedCallback .

Я ищу, чтобы выяснить, есть ли лучший способ сделать это, какие-либо очевидные причины, по которым это не сработает, которые я мог упустить из виду, и любые аналогичные идеи, которые могут привести к удалению кода JSX и логики.

Метки: