将表单连接到 Javascript 对象（和其他最佳实践建议）答案

【问题标题】：Connecting a form to a Javascript Object (and other best practice advice)将表单连接到 Javascript 对象（和其他最佳实践建议）
【发布时间】：2009-01-02 14:58:05
【问题描述】：

多年来，我一直在使用 javascript 在网站上执行轻量级功能 - DOM 操作等 - 但现在我开始研究使用它来完成更多繁重的工作（与 PHP 结合使用）。我才刚刚开始接触 OO JS，而且我仍在努力了解与它配合得很好的最佳实践和设计模式。

更具体地说 - 我的问题是，这里有人可以建议将表单连接到 javascript 对象的技术吗？

在我当前的实现中，我有一个可以通过（相当大的）表单编辑的 JS 对象。当我实例化对象时，我将一个 onchange 观察者附加到表单，其回调将表单字段与对象参数同步。我正在处理通过 AJAX 提交的表单 - 还有一个定期请求，它将表单信息的临时版本保存到 mySQL DB。我想知道的一件事是是否可以轻松地处理另一个方向的同步 - 表单字段更新的对象的 onchange（例如在表单重置时）。

我很想知道这种方法是否正确/合理，更一般地说，我很想听听有关 OOJS 表单处理的建议。

提前干杯:)

（顺便说一句，我正在使用原型）

【问题讨论】：

过去一小时内有 24 个人查看此内容，但没有人接受。我建议你改写这个问题。您要求的不是那么具体或明确。

标签： javascript design-patterns forms observer-pattern

【解决方案1】：

你可以使用$("form").serialize(true);

http://www.prototypejs.org/api/form/serialize

不需要onchange事件，每次需要获取表单数据时调用serialize()方法即可。

【讨论】：

【解决方案2】：

为什么不在你的对象中创建一个方法来重新同步对象和表单呢？并在对象的每次更改时调用它？您可以创建一个特殊的更改函数来确保每次更改都会调用它。

【讨论】：

【解决方案3】：

这是一个完全合理的方法。 JS 并不完全鼓励这种事情，因为它奇特的对象系统，特别是绑定方法不是一流对象的方式，但是通过一些合适的元类和回调胶水，这是非常可能的。

如果您想免费获得更多这种低级表单处理的东西，您可能还想查看一个小部件库。还没有尝试过基于 Prototype 构建的那些；其他可能性包括 YUI 的。

从服务器更新模型非常简单。通常，您会轮询 AJAX 请求并让服务器传回差异，如果它知道它们，或者只是为每个对象更新添加时间戳，在每次更新时将新对象详细信息发送到客户端，并让客户端决定如何将其与用户在此期间所做的任何更改合并。

【讨论】：