Классы ES6 - Chain Select

Question

Я некоторое время пытаюсь найти лучший способ создать цепочку выбора.Я не могу понять, как загрузить другой уровень и передать его группе уровней (также я стараюсь соблюдать принцип единой ответственности).

Вот то, что я пытаюсьсделать:

• первый уровень будет отображаться при загрузке
• при изменении уровня его подуровень будет загружать
• в группе, в которой должно быть всезагруженные ярусы
• это должно быть бесконечное количество ярусов

Вот что сделано до сих пор:

class TierGroup {

  constructor() {
        this.$tiersContainer = $('#tiers');
        this.group =[];
        this.createTier();

  }

  createTier() {

        let tier = new Tier();
        tier.$select.on('change', e => {

            let tier =new Tier();

            tier.$select.on('change', e => {
                    let tier =new Tier();
                    this.group.push(tier);
                    this.$tiersContainer.append(tier.$select);

            });

            this.group.push(tier);
            this.$tiersContainer.append(tier.$select);

        });

        this.$tiersContainer.append(tier.$select);
        this.group.push(tier);

  }  

}

class Tier {
  constructor() {
    this.$select =$('<select/>');
    this.load();
  }

  load() {
    axios.get('https://jsonplaceholder.typicode.com/users').then(res => {
      for (let row in res.data) {
        this.$select.append('<option>'+res.data[row].name+'</option>')
      }
    })
  }

}


var tier =new TierGroup();

https://jsbin.com/buziyu/edit?html,js,output

Спасибо за ваше время!

Answer 1

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

Обеспечение единой ответственностиПринцип - это ключ к решению этой проблемы:)

Как вы можете видеть в своем коде, метод createTier выполняет четыре вещи (что слишком много):

• создает новый уровень;
• присоединяет к нему обработчик (со своим собственным определением, слишком много);
• добавляет новый уровень к группе и домену;
• координируйте эти шаги.

Я бы выбрал из этого метода два отдельных для:

1. создания уровня с его обработчиком;
2. добавление уровня.

В отдельности подготовка уровня может быть примерно такой:

buildTier() {
  let tier = new Tier();
  tier.$select.on('change', /* something here */)
  return tier
}

Добавление уровня вместо этого может быть чем-то вроде:

appendTier(tier) {
  this.$tiersContainer.append(tier.$select);
  this.group.push(tier);
}

Теперь давайте оставим работу по координации этого материала на уровне создания, этостанет:

createTier() {
  const newTier = this.buildTier()
  this.appendTier(newTier)
}

или даже:

createTier() {
  this.appendTier(this.buildTier())
}

Как видите, каждый метод делает только одну вещь.Интересно то, что нигде уровень не связан с его потомком или родителем, что означает, что мы можем использовать createTier в качестве обработчика для выбора, обращая внимание на передачу текущего контекста:

buildTier() {
  let tier = new Tier();
  tier.$select.on('change', this.createTier.bind(this))
  return tier
}

Надеюсь, это поможет:)

https://jsbin.com/wuviqoxohu/edit?html,js,output