Question

点击我的程序会在fruit_shelf和amp;之间移动单个水果。水果篮。

我不确定是否应该使用两个单独的功能，例如：moveToBasket＆amp; moveToShelf，或者只使用一个通过if / else条件处理这两个函数的函数效率更高。

版本1使用if / else：

的一个函数

  let fruit_shelf = document.querySelector('.fruit-shelf'),
    all_fruits = document.querySelectorAll('.fruit-shelf li'),
    fruit_basket = document.querySelector('.fruit-basket');

  function moveBackFourth(event) {

    if (!fruit_basket.contains(event.target)) {
      fruit_basket.appendChild(event.target);
    } else {

      fruit_shelf.appendChild(event.target);
    }
  }

  for (let i = 0; i < all_fruits.length; i++) {

    all_fruits[i].addEventListener('click', moveBackFourth);
  }

版本2使用两个独立的功能在篮子和篮子之间移动搁板：

https://jsfiddle.net/73dnprx3/1/

  let fruit_shelf = document.querySelector('.fruit-shelf'),
    all_fruits = document.querySelectorAll('.fruit-shelf li'),
    fruit_basket = document.querySelector('.fruit-basket');

  function moveToBasket(event) {
    fruit_basket.appendChild(event.target);
  }

  function moveToShelf(event) {
    fruit_shelf.appendChild(event.target);
  }

  for (let i = 0; i < all_fruits.length; i++) {

    all_fruits[i].addEventListener('click', moveToBasket);
  }

  fruit_basket.addEventListener('click', moveToShelf);

我知道的重要原因是，如果其中一种方法优越，我不想继续使用不良做法。

这些选项中的一个会给我带来麻烦，还是其中一种方法很好？

任何输入都非常感谢！： - ）

Answer 1

除非你有一个很多的水果，否则它并不重要，但第一个效率很低，因为它必须根据点击的位置搜索你已经知道的信息。

但是你不需要两个不同的功能，你可以只使用一个：

(function() {

  let fruit_shelf = document.querySelector('.fruit-shelf'),
    all_fruits = document.querySelectorAll('.fruit-shelf li'),
    fruit_basket = document.querySelector('.fruit-basket');

  // Gets called with `this` referring to either `fruit_shelf` or `fruit_basket`
  function moveFruit(event) {
    this.appendChild(event.target);
  }

  for (let i = 0; i < all_fruits.length; i++) {

    all_fruits[i].addEventListener('click', moveFruit.bind(fruit_basket));
  }

  fruit_basket.addEventListener('click', moveFruit.bind(fruit_shelf));
})();

ul {
  border: 1px solid darkred;
  width: 80%;
  margin: 0 auto 1em auto;
  border-radius: 0.5em;
  min-height: 6em;
  line-height: 2em;
  padding: 1em 1.5em;
}

<ul class="fruit-shelf">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<ul class="fruit-basket">

</ul>

从技术上讲，它使用三个函数，因为bind返回一个新函数。但从维护角度来看，您只需要维护moveFruit。

（如果您不想使用this，只需使用.bind(null, ...)并接受将水果移动到第一个参数的位置。）

使用两个命名函数，还是一个带条件语句？

1 个答案: