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

问题描述：

我写了一个应用程序，其中多个用户可以实时编辑数据库。我正在使用socket-io通过对数据库的任何更改保持所有用户的页面是最新的。如何将数据传递给元素的change（）方法？

所有输入值广播一个变化。说我的功能结合到一个输入的变化事件：

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

，但你不能传递数据改变（）;只有在绑定该功能时。你们认为这是什么功能编程方法？

答

如果您一遍又一遍地复制和粘贴代码，可以通过将重复代码分离为新函数并使其更改和套接字函数调用它来避免这种情况。

例如，它可以工作是这样的：

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（）方法？

相关推荐