Question

由于Javascript性能可能会在大型输入表单上变得非常密集，因此跟踪和标记输入字段更改的最简洁，最快捷的方法是什么？

该项目使用的是.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 pattern。

我建议Knockout。

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

最快（Javascript / jQuery）方式来跟踪大输入表单中的更改

3 个答案: