ES6课程 - 连锁选择

Question

我正在努力寻找创建连锁选择的最佳方法。我无法弄清楚如何加载Tier另一层并将其传递给层组（我也尝试尊重单一责任原则）。

这是我想要做的：

• 第一层将在加载时显示
• 在更改等级时，他的子层将加载
• 在组中，它需要是所有加载的层
• 它必须是无限数量的层

这是迄今为止所做的：

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方法正在做四件事（这太多了）：

• 创造一个新的层次;
• 附加一个处理程序（用它自己的定义，太多了）;
• 将全新的层级添加到组和dom;
• 协调这些步骤。

我会从这个方法中取出两个独立的方法：

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，它会变成：

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