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

创建一个新层；
在其上附加一个处理程序（具有其自己的定义，太多的方法）；
将全新的等级添加到组和dom;
协调这些步骤。

我将从这种方法中取出两个单独的方法：

使用其处理程序创建层；
附加一层。

孤立地看，层的准备可能像这样：

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

ES6类-链选择

1 个答案: