JS 游戏设计 - 主要是静态与主要是动态 HTML [关闭]答案

【问题标题】：JS Game design - mostly static vs. mostly dynamic HTML [closed]JS 游戏设计 - 主要是静态与主要是动态 HTML [关闭]
【发布时间】：2015-09-05 02:45:27
【问题描述】：

我是 JS 新手，正在编写一个完全是客户端的游戏。我有一个关于 HTML 结构的基本问题。

假设游戏将是一款 RPG，我想向用户展示他们角色的统计数据，例如智力 18、力量 15、魅力 20 等。

现在，由于这些值不是静态的，并且每个新回合都会改变（游戏是基于回合的），因此这些值需要由 JavaScript 填充。假设我们想在列表中显示它们。

据我所知，有两种方法可以做到这一点，一种是保留静态 HTML 并使用 JavaScript 仅填写如下值：

<ul>
  <li>Intelligence:
    <div id="IntValue"></div>
  </li>
  <li>Strength:
    <div id="StrValue"></div>
  </li>
</ul>

然后在 JavaScript 中编辑这些 div，例如 getElementById("IntValue").innerHTML = "18";

第二种方法可能是仅将<ul id="CharStats"></ul> 放入实际的HTML 文件中，然后使用JavaScript 生成包含所有<li> 元素的整个列表。例如，我可以创建一个tableHTML 字符串，然后将所有<ul> 一个一个动态地添加到其中，然后获取CharStats 并将其innerHTML 设置为该tableHTML 字符串。

哪个更好？我知道这取决于具体情况，但您至少可以指导我找到一些关于使用 JavaScript 编写此类内容的好资源吗？

【问题讨论】：

标签： javascript html dynamic static-html

【解决方案1】：

这两种方法都很好，事实上，整个frameworks 都建立在渲染 html 客户端以减少服务器负载 - 这些框架需要从服务器提供 JSON 而不是整个 HTML 响应，然后 JS构建基本上构成页面的 HTML 代码。

但是，在您的情况下，您可能希望以不同的方式做事，请这样看待：

方法 A：更新特定元素
方法 B：每次刷新整个列表

方法 A，如果您每回合只更改 1 个统计信息 - 这是可行的方法，因为您一次更新的 DOM 较少，但您需要跟踪的 ID 更多。

方法 B，如果您要在每回合更改多个统计数据，那么您可能想要这样做，因为您可以构建 <li> 并将它们放入 ul 每回合。

这取决于你的情况，方法 B 确实比方法 A 修改 DOM 更多，但两者都很好用。

注意

方法 B 删除的元素比方法 A 多，请注意，如果您有其他事件处理程序绑定到由方法 B 刷新的元素，您将不得不重新选择这些元素，因为您之前使用的元素将消失。

性能方面我不会担心方法 A 还是方法 B 是最好的。最不容易出错的可能是方法 A，因为您正在更新页面上的特定元素（更少的 DOM 操作意味着更少可能出现的错误）。

希望这有助于将您推向正确的方向，我链接了该框架以供参考，因为它使用了一种非常酷的方法来显示来自服务器端的数据；）

祝你好运，西德尼·李布兰德

【讨论】：