2017-02-12 86 views
0

我寫了一個應用程序,其中多個用戶可以實時編輯數據庫。我正在使用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() 
    } 
}); 

,但你不能傳遞數據改變();只有在綁定該功能時。 你們認爲這是什麼功能編程方法?

回答

0

如果您一遍又一遍地複製和粘貼代碼,可以通過將重複代碼分離爲新函數並使其更改和套接字函數調用它來避免這種情況。

例如,它可以工作是這樣的:

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