Question

简单的收藏系统。我是这样写的：

$(".favourite").click(function(){
  // It's active; deactivate it
  if ($(this).hasClass('active')) {
    changeFavourites('remove', -1);
    }
  // It's not active; activate it
  else {
    changeFavourites('add', 1);
    }
  });

然而，这是一些旧代码，我正在重构它。这段代码会更好吗？

// Handle clicking on favourites to add or remove them
// Cannot use .click() ( http://stackoverflow.com/a/12673849/938236 )
$(document).on('click', ".favourite.active", function(){
  changeFavourites('remove', -1);
  });

// :not() http://stackoverflow.com/a/520271/938236
$(document).on('click', ".favourite:not(.active)", function(){
  changeFavourites('add', 1);
  });

我看到的主要问题是我在选择器中嵌入了一个条件，而不是使它成为明显的 if 。我担心代码的可读性会降低，而且当我回到此代码时，未来我将不会感到高兴。如果我没有弄错，我认为第二个代码可以称为多态。

Answer 1

这是我的偏好：

$(document).on('click', ".favourite", function(){
    var active = $(this).hasClass('active');
    changeFavourites(
        active ? 'remove' : 'add', 
        active ? -1 : 1
    );
});

这是条件（三元）运算符 - [boolean] ? [value-if-true] : [value-if-false]

Answer 2

这是我的版本：

$(document).on('click', '.favourite', function() {
    isActive = $(this).hasClass('active');
    //v1
    var method = isActive ? 'remove' : 'add';
    var flag = isActive ? -1 : 1;
    changeFavourites(method, flag);

    //v2 - bit silly
    var params = isActive ? ['remove', -1] : ['add', 1];
    changeFavourites(params[0], params[1]);
});

Answer 3

虽然两个答案都足够好，但我仍然发现它们缺少一点（作为我的初始代码）。经过深思熟虑和尝试，我在学习的同时可以负担得起，我决定使用这段代码。我正在使用这两个处理程序，但我还添加了另一层抽象，saveFavourites();将处理键盘快捷键，当用户按 tab 并点击时到达upvote / downvote时输入：

// Handle clicking on favourites to add or remove them
$(document).on('click', ".favourite:not(.active)", function(){
  saveFavourites('add');
  });

$(document).on('click', ".favourite.active", function(){
  saveFavourites('remove');
  });

在jquery处理程序或函数内部添加条件？

3 个答案: