Question

假设在电子商务网站上，有2种方式可以添加项目，一种来自目录，一种来自购物车......

<btn class="add_item" data-type="cart"></btn>
<btn class="add_item" data-type="catalog"></btn>

因为这些功能都是关于添加项目，所以有很多重叠。但是，因为它们出现在不同的地方，所以也存在一些差异。是否存在遵循标准原则（例如，SRP，DRY等）的代码格式的约定？

我特别询问一个约定，因为我正在尝试编写更多“标准”代码。 FWIW，从历史上看，我总是做选项B，我觉得这最终让我走上了非常长的功能，嵌套的if / thens一直令人困惑。

选项A

$(".add_item[data-type='cart']").click(function() {
  doSomethingUniqueToCart();
  doSomethingSharedToAdd();
})

$(".add_item[data-type='catalog']").click(function() {
  doSomethingUniqueToCatalog();
  doSomethingSharedToAdd();
})

选项B

$(".add_item").click(function() {
  if ($(this).data("type") == "cart") {
    doSomethingUniqueToCart();
  } else {
    doSomethingUniqueToCatalog();
  }
  doSomethingSharedToAdd();
})

Answer 1

我为你选择了C：

var functionList = {
"cart":doSomethingUniqueToCart,
"catalog":doSomethingUniqueToCatalog
}
$(".add_item").click(function() {
  functionList[$(this).data("type")]();
  doSomethingSharedToAdd();
});

Answer 2

通常，附加特定侦听器比附加通用侦听器更有效，并且必须查询信息以区分案例。我可能会做类似的事情，

$(".add_item[data-type='cart']").click(doSomethingUniqueToCart);
$(".add_item[data-type='catalog']").click(doSomethingUniqueToCatalog);
$(".add_item").click(doSomethingSharedToAdd);

如何干掉一些代码

2 个答案: