JS 游戏设计 - 主要是静态 vs. 主要是动态 HTML

Question

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

假设游戏将成为角色扮演游戏，我想向用户显示他们角色的统计数据，例如智力 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 文件中，然后生成包含所有 <li> 元素的整个列表，例如 JavaScript .例如，我可以创建一个 tableHTML 字符串，然后将所有 <ul> 一个一个地动态添加到它，然后获取 CharStats 并将其 innerHTML 设置为那个 table HTML 字符串.

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

Answer 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 操作意味着更少可能的错误）。

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

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

JS 游戏设计 - 主要是静态 vs. 主要是动态 HTML

JS Game design - mostly static vs. mostly dynamic HTML

javascript

html

dynamic

static-html