javascript - 如何合并这两个相似的js函数？

Question

如何合并这两个函数？

$("#f-box").droppable({
    accept: "#f-cwrapper > div",
    drop: function (event, ui) {
        deletecard(ui.draggable);
    }
});

$("#l-box").droppable({
    accept: "#l-cwrapper > div",
    drop: function (event, ui) {
        deletecard(ui.draggable);
    }
});

Answer 1

这些都是陈述。仅涉及一个函数:droppable。这两个语句调用 droppable 函数两次，每次使用不同的参数。

如果您问的是，“有没有办法将这两个语句写成一个语句？当然可以。例如，

$( "#f-box, #l-box" ).droppable({
  accept: function () { return "#" + this.id.charAt(0) + "-cwrapper > div"},
  drop: function (event, ui) {
        deletecard(ui.draggable);
    }
});

但是，从任何判断代码的指标来看，单个语句都比两个语句更糟糕。没有重复，但我认为这段代码更难阅读并且更脆弱。我们引入的用于计算 accept 选择器的函数是现在代码中最复杂的部分。

我认为您的目的是删除重复项。这就是这段代码所具有的“代码味道”。您可以做一些事情，但其中是否有任何事情可以改进代码将需要判断。

第一条评论是您多次使用匿名函数。您可以命名该函数并以这种方式删除一些重复项:

var drop = function (event, ui) {
        deletecard(ui.draggable);
};

$("#f-box").droppable({
    accept: "#f-cwrapper > div",
    drop: drop
});

$("#l-box").droppable({
    accept: "#l-cwrapper > div",
    drop: drop
});

消除重复代码的常见方法之一是名为“提取方法”的重构。您可以创建一个提取函数，其参数是语句之间的差异，然后调用该函数两次:

function createDroppable(droppableSelector, acceptSelector) {
    $(droppableSelector).droppable({
    accept: acceptSelector,
    drop: function (event, ui) {
        deletecard(ui.draggable);
    }
});    
createDroppable("#l-box","#l-cwrapper > div");
createDroppable("#f-box","#f-cwrapper > div");