Как слить эти две аналогичные функции 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, каждый раз с разными параметрами.

Если вы спрашиваете это, «Есть ли способ, чтобы написать два statments как одно утверждение? Конечно. Например,

$("#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");