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函数两次，每次都使用不同的参数。

如果您要问的是，＆＃34;有没有办法将这两个声明写成一个声明？当然。例如，

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

但是，对于任何判断代码的度量，该单个语句将比两个语句更糟糕。没有重复，但我认为这段代码更难阅读，更脆弱。我们为计算accept选择器而引入的函数现在是代码中最复杂的部分。

我认为您的目的是删除重复。这就是＆＃34;代码气味＆＃34;这段代码有。您可以做一些事情，但是否这些改进代码将是一个判断调用。

第一个注释是您多次使用匿名函数。您可以命名该函数并以这种方式删除一些重复：

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
});

摆脱重复代码的常见方法之一是名为＆＃34;提取方法的重构。＆＃34;您可以创建一个提取函数，其参数是语句之间的差异，然后调用该函数两次：

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");

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

1 个答案: