如何干燥一些代码

Question

假设在电子商务网站上，有两种添加商品的方式，一种来自目录，一种来自购物车...

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

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

我特意询问约定，因为我正在尝试编写更多 "standard" 代码。 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);

如何干燥一些代码

How to DRY up some code

jquery

dry