-1

我是 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 中编辑这些 divgetElementById("IntValue").innerHTML = "18";

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

哪个更好？我知道这将取决于具体情况，但你至少能指导我找到一些关于用 JavaScript 编码这些东西的好资源吗？

4

1 回答 1

0

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

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

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

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

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

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

笔记

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

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

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

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

于 2015-06-19T07:59:11.307 回答