Question

我写了一个应用程序，多个用户可以实时编辑数据库。我使用socket-io来保持所有用户的页面都是最新的，对数据库进行任何更改。

所有输入值都会广播更改。假设我将函数绑定到输入的更改事件：

$(".input-field").change(function(ev) {
   codeThatChangesOtherInputValuesOnMyPage1;
   codeThatChangesOtherInputValuesOnMyPage2;
   codeThatChangesOtherInputValuesOnMyPage3;
   codeThatChangesOtherInputValuesOnMyPage4;
   codeThatChangesOtherInputValuesOnMyPage5;
   codeThatChangesOtherInputValuesOnMyPage6;
   codeThatChangesOtherInputValuesOnMyPage7;
   codeThatChangesOtherInputValuesOnMyPage8;
   var tableColumn = $(ev.target).attr('table-col');
   var newFieldValue = $(ev.target).val()
   broadcastChange(tableColumn, newFieldValue); // this is pseudo code for a socket-io emit()
});


socket.on('runThisWhenReceivingBroadcastFromServer', function(response) {
    // response.data has the input element id of element I should update.
    // Get the input field i should update
    var theInputField = getInputField(response.data)
    $(theInputField).val(getNewInputValue(response.data))
    $(theInputField).change();  
    // I call change because I want all my code in the input's change function to run, except for the last line.
});

我已经修复了这个问题，但我只是重复自己，只是从更改函数复制我的所有代码并将其粘贴在广播接收中，然后省略broadcastChange行。但我想跟随DRY（不要重复自己）。

还codeThatChangesOtherInputValuesOnMyPage1;就是这样，代码。它的代码很多。您将如何重组代码？

我的第一个想法是做这样的事情（伪代码）：

$(".input-field").change(function(ev) {
   codeThatChangesOtherInputValuesOnMyPage1;
   codeThatChangesOtherInputValuesOnMyPage2;
   codeThatChangesOtherInputValuesOnMyPage3;
   codeThatChangesOtherInputValuesOnMyPage4;
   codeThatChangesOtherInputValuesOnMyPage5;
   codeThatChangesOtherInputValuesOnMyPage6;
   codeThatChangesOtherInputValuesOnMyPage7;
   codeThatChangesOtherInputValuesOnMyPage8;
   var tableColumn = $(ev.target).attr('table-col');
   var newFieldValue = $(ev.target).val()
   if (!ev.data.comingFromBroadcastReceiverFunction) {
       broadcastChange(tableColumn, newFieldValue); // this is pseudo code for a socket-io emit()
   }
});

但你无法将数据传递给change（）;仅在绑定函数时。你们认为这是函数式编程的方法吗？

Answer 1

如果要反复复制和粘贴代码，可以通过将重复代码分成新函数来避免这种情况，并让更改和套接字函数都调用它。

例如，它可以像这样工作：

function updateInputValue(inputField) {
   codeThatChangesOtherInputValuesOnMyPage1;
   codeThatChangesOtherInputValuesOnMyPage2;
   codeThatChangesOtherInputValuesOnMyPage3;
   codeThatChangesOtherInputValuesOnMyPage4;
   codeThatChangesOtherInputValuesOnMyPage5;
   codeThatChangesOtherInputValuesOnMyPage6;
   codeThatChangesOtherInputValuesOnMyPage7;
   codeThatChangesOtherInputValuesOnMyPage8;
}

$(".input-field").change(function(ev) {
   updateInputValue($(ev.target));
   var tableColumn = $(ev.target).attr('table-col');
   var newFieldValue = $(ev.target).val()
   broadcastChange(tableColumn, newFieldValue); // this is pseudo code for a socket-io emit()
});


socket.on('runThisWhenReceivingBroadcastFromServer', function(response) {
    // response.data has the input element id of element I should update.
    // Get the input field i should update
    var theInputField = getInputField(response.data)
    $(theInputField).val(getNewInputValue(response.data))
    updateInputValue($(theInputField));  
    // I call change because I want all my code in the input's change function to run, except for the last line.
});

如何将数据传递给元素的change（）方法？

1 个答案: