Как передать данные методу change() элемента?

Question

Я написал приложение, в котором несколько пользователей могут редактировать базу данных в реальном времени. Я использую socket-io, чтобы обновлять страницы всех пользователей с любыми изменениями в базе данных.

Все входные значения передают изменение. Say я связать функцию события изменения входного в:

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

, но вы не можете передать данные для изменения(); только при связывании функции. Что вы, ребята, думаете, это подход к функциональному программированию?

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