跟踪大型输入形式中的更改的最快方法（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