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

Question

点击后，我的程序会在水果架和水果篮之间移动单个水果。

我不确定是否应该使用两个单独的函数，例如:moveToBasket 和 moveToShelf，或者仅使用一个通过 if/else 条件处理这两个函数的函数是否更有效。

版本 1 使用一个带有 if/else 的函数:

https://jsfiddle.net/pu8ye9bq/2/

  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返回一个新函数。但从维护的 Angular 来看，您只需维护 moveFruit 即可。

(如果您不想使用 this，只需使用 .bind(null, ...) 并接受将水果移动到哪里作为第一个参数.)