javascript - 管理和初始化代表 DOM 元素的 JS 对象的最佳方式

Question

当创建内容将由用户动态创建和销毁的网页时，构造和初始化 javascript 功能和 DOM 元素的最佳方法是什么？

示例 -- 假设您有一个待办事项列表，其中的项目可以由用户重新排序、创建和销毁:

• 每个 Item 都有一个视觉表示(即 Dom 元素)，当用户添加一个项目时需要动态创建
• 每个项目还将有一个 javascript 表示(即具有自定义方法和属性的 javascript 对象)，当用户添加一个项目时将实例化

处理创建初始 DOM 元素及其 javascript 表示的最佳方法是什么？我可以看到几种可能性:

• 让服务器吐出结构化 HTML 并让 JS 通过遍历 DOM 来收集初始状态。
• 让服务器吐出结构化 HTML 和一些 JS 代码来创建对象集并将它们与它们的 DOM 表示相关联。
• 让服务器吐出 JS 对象，并在页面加载后动态创建 DOM 元素。

Answer 1

我不确定最好的方法；这取决于您的要求。

我最喜欢的方法是为每个数据结构创建一个 JavaScript 模板；这样，如果您正在进行 AJAX 调用，您唯一需要通过网络发送的就是数据本身，而不是 HTML。

您还可以使用混合方法，其中服务器为初始页面加载吐出结构化 HTML，读取结构(您应该在 HTML 中有足够的语义来知道您正在处理的是什么，即使你不使用这种方法)，但仍然使用 JavaScript 模板将数据填充到更新中。这种方法的明显缺点是您最终会在客户端和服务器端复制模板；但是，有一些工具和框架(例如 Google Closure Templates)允许您编写一次模板并为您生成适当的服务器和客户端版本。如果您希望您的应用程序在没有 JavaScript 的情况下工作，您将必须从服务器发送 HTML。如果您需要 JavaScript，我认为没有理由让服务器吐出 HTML，除非您担心多个 HTTP 请求。

因此，您是否要为初始页面加载发送 JavaScript 结构和 HTML 取决于几个因素:您的 objective-c PU 是什么？ (桌面、移动)您的客户将拥有什么类型的带宽？ (低于 3G 的速度？)如果您的带宽不受限制但 CPU 有限，那么在第一页加载时发送结构和数据会更有意义。如果您有无限的 CPU 但带宽有限，您只想发送结构或数据并从中生成另一个，等等。

您也可以使用 GWT 或 jQuery 的小部件之类的东西来为您处理很多这样的痛苦，但它们的想法都是一样的:每个小部件/结构/任何东西只有一个 HTML 布局副本-want-to-to-to-it 以便数据本身保持精简并且易于使用。

当然，您可以避免的 HTTP 请求越少越好，但这会导致您的代码相当复杂和重复，除非您使用框架或工具包或自己动手。