管理和初始化表示 DOM 元素的 JS 对象的最佳方法

Question

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

示例 - 假设您有一个todo-list 谁的项目可以由用户重新排序、创建和销毁：

• 每个项目将有一个视觉表示（即 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 以进行初始页面加载取决于几个因素：您的目标 CPU 是什么？ （桌面、移动）您的客户将拥有什么类型的带宽？ （低于 3G 的速度？）如果您的带宽不受限制但 CPU 有限，那么在首页加载时发送结构和数据会更有意义。如果您有无限的 CPU 但有限的带宽，您只想发送结构或数据并从中生成另一个，等等。

您还可以使用 GWT 或 jQuery 的小部件之类的东西来为您处理很多这种痛苦，但它们的想法都是相同的：每个小部件/结构/无论您想要调用什么，只有一份 HTML 布局副本，以便数据本身保持精简且易于使用。

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

Answer 2

就性能而言，您最好使用第三个选项 - 动态创建 DOM 元素。首先，因为服务器响应会更小，从而更快；其次，因为 JavaScript 在创建对象时性能会更好。

当您只需要向页面中注入元素时，看看性能，将这个：

element.appendChild(document.createElement("div"));

与这个：

element.innerHTML = "<div></div>";

innerHTML 进行比较更快。但是，当您需要引用注入的元素时，将以下内容

var child = element.appendChild(document.createElement("div"));

与以下内容进行比较：

element.innerHTML = "<div id=\"" + childId + "\"></div>";
var child = document.getElementById(childId);

createElement 赢得了性能竞赛。

由于您需要元素引用，因此从服务器检索 JSON 并创建元素将获得更好的性能。

话虽这么说，您可以通过仅创建需要引用的元素并在其他地方注入 html 来获得最佳性能。例如，对于此 html：

<div>
    <div class="a">Item A</div>
    <div class="b">Item B</div>
</div>

如果您只需要对父级

的引用，而不需要对其子级的引用，那么不要动态创建子元素，而是创建父级

。 div> 动态地，然后为内容设置其innerHTML：

var item = serverObject[i];
var el = parent.appendChild(document.createElement("div"));
el.innerHTML = "<div class=\"" + 
    item.A.className + "\">" +
    item.A.text + "</div><div class=\"" +
    item.B.className + "\">" +
    item.B.text + "</div>";

因此，在性能方面，您可以两全其美。

编辑 - 添加超出性能考虑的信息

从架构上来说，我不喜欢服务了解太多有关客户端的信息，只了解它提供的数据。这样，如果您决定更改 UI，则无需修改该服务即可让它输出不同的 HTML。此外，如果您发现想要在其他地方使用相同的数据，您已经有了可以重复使用的服务。