Рефакторинг четырех методов всего за два в освещенном элементе - PullRequest
Новая
       35

Рефакторинг четырех методов всего за два в освещенном элементе

0 голосов
/ 25 февраля 2020

Можно ли провести рефакторинг этих четырех методов всего за два в освещенном элементе?

У меня один и тот же счетчик, но дубликат, один для случая 0 и один для случая 1. Поскольку переменные различны, я сделал один и тот же метод дважды, чтобы взять каждую переменную baceuse. Я не нашел способа сделать это вместе.

Вот мой код: 

import { LitElement, html } from 'lit-element';

class TypeSelect extends LitElement {
    static get properties() {
        return {
            numAdults: {type: Number},
            numChildren: {type: Number},
        };
    }

    constructor() {
        super();
        this.numAdults = 1;
        this.numChildren = 0;
        this.adultsType = {
            min: 1,
            max: 5
        };
        this.childrenType = {
            min: 0,
            max: 5
        };
        this.numPassengers = 1;
    }

    adultIncrement(e) {
        e.preventDefault();
        if (this.numAdults < this.adultsType.max) this.numAdults++;
    }

    adultDecrement(e) {
        e.preventDefault();
        if (this.numAdults > this.adultsType.min) this.numAdults--;
    }

    childrenIncrement(e) {
        e.preventDefault();
        if (this.numChildren < this.childrenType.max) this.numChildren++;
    }

    childrenDecrement(e) {
        e.preventDefault();
        if (this.numChildren > this.childrenType.min) this.numChildren--;
    }

    createRenderRoot() {
        return this;
    }

    render(){
        return html`
          <div class="counter">
              <button @click="${this.adultDecrement}"></button>
              <span>${this.numAdults}</span>
              <button @click="${this.adultIncrement}"></button>
          </div>
          <div class="counter">
              <button @click="${this.childrenDecrement}"></button>
              <span>${this.numChildren}</span>
              <button @click="${this.childrenIncrement}"></button>
          </div>
        `;
    }
}

customElements.define('type-select', TypeSelect);

1 Ответ

0 голосов
/ 27 февраля 2020

Что-то вроде этого должно работать, но если у вас есть только эти два поля, я не уверен, что попытался бы изменить его. Лучше просто быть явным с четырьмя методами. 

import { LitElement, html } from 'lit-element';

class TypeSelect extends LitElement {
    static get properties() {
        return {
            numAdults: {type: Number},
            numChildren: {type: Number},
        };
    }

    constructor() {
        super();
        this.numAdults = 1;
        this.numChildren = 0;
        this.validations = {
          numAdults: {
            min: 1,
            max: 5
          },
          numChildren: {
            min: 0,
            max: 5
          }
        };
        this.numPassengers = 1;
    }

    increment(e, countType) {
      e.preventDefault();
      if (this[countType] < this.validations[countType].max) this[countType]++;
    }

    decrement(e, countType) {
      e.preventDefault();
      if (this[countType] > this.validations[countType].max) this[countType]--;
    }

    createRenderRoot() {
        return this;
    }

    render(){
        return html`
          <div class="counter">
              <button @click="${(e) => this.decrement(e, 'numAdults')}"></button>
              <span>${this.numAdults}</span>
              <button @click="${(e) => this.increment(e, 'numAdults')}"></button>
          </div>
          <div class="counter">
              <button @click="${(e) => this.decrement(e, 'numChildren')}"></button>
              <span>${this.numChildren}</span>
              <button @click="${(e) => this.increment(e, 'numChildren')}"></button>
          </div>
        `;
    }
}

customElements.define('type-select', TypeSelect);

Если вы хотите провести рефакторинг, создайте дочерний компонент, который принимает параметры проверки и поддерживает локальный счет, так что TypeSelect render выглядит примерно так: 

render(){
  return html`
    <type-counter name="adults" count="${this.numAdults}" min="1" max="5"></type-counter>
    <type-counter name="children" count="${this.numChildren}" min="0" max="5"></type-counter>
  `;
}
...