跟蹤大型輸入形式中的更改的最快方法（Javascript / jQuery）

Question

由於Java的性能可能會集中在大型輸入表單上，因此跟蹤和標記輸入字段更改的最干凈，最快的方法是什么？

該項目正在使用.NET（MVC），並且輸入已綁定到ViewModels，但這可能（至少是半個）無關緊要。 我主要關心的是如果可能有數千個字段和許多隱藏的輸入字段（通常數量較少，但是有時可能有數千個字段）則避免性能問題。 有下拉菜單，文本字段，復選框等。

具有各種輸入類型的長格式。

<input type="... textbox/select..." class="trackMe" ... />
<input type="hidden" class="hiddenInputIsDirty" ... />

想到的選項。

悄悄：

$( ".trackMe" ).on( "change", function() {
    $(this).sibling("#hiddenInputIsDirty").val("true");
});

要么

或者使用onClick="Observe.MarkChanged();" 在輸入上。

(function( Observe, $, undefined ) {        
    //Public Method
    Observe.MarkChanged = function() {
        $(this).sibling("#hiddenInputIsDirty").val("true")
    };        
}( window.Observe= window.Observe|| {}, jQuery ));

需要說明的是：每個可見的輸入字段都會有一個隱藏的輸入字段來標記。 當用戶更改輸入字段值時，它將觸發一些操作以將隱藏字段標記為已更改。 我認為這是跟蹤變更的最快，最可靠的方法。 這些方法之一是已知更快嗎，還是有更快的替代方法？

Answer 1

您可以使用MVVM模式 。

我會推薦淘汰賽 。

Answer 2

您可以立即使用的一種簡單方法是使用一個對象來保持跟蹤，而不是使用多個隱藏的輸入。 多個隱藏的輸入只會使表單元素加倍並且放慢速度。 稍后，您可以學習並移至庫，這些庫將為您提供即裝即用的所有功能。

像這樣：

// initialize at the start
var tracker = new Object;

$('input.formfield').each(function() {
    tracker[$(this).attr('id')] = false;
});

// and then later on

$(".track").on("change", function() {
    tracker[$(this).attr('id')] = true;
});

首先，使用與表單輸入id相同的屬性名稱初始化對象，並將其設置為false。 然后，在進行任何更改時，只需翻轉相應的屬性即可。 完成后，您可以簡單地將此對象傳遞給服務器端代碼，或者在提交之前進行檢查。

檢查此小提琴： http : //jsfiddle.net/VbVyp/3/

是的，無論您使用哪種庫，成千上萬個表單域可能都不是一個好主意。 實現分頁之類的向導。

Answer 3

您可以看到以下jquery庫來跟蹤更改。 https://github.com/shashankshetty/FormChangeTracker