Question

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

假设游戏将成为RPG并且我想向用户显示他们角色的统计数据，例如Intelligence 18，Strength 15，Charisma 20等。

现在，由于这些值不是静态的，并且每次新的转弯都会改变（游戏是基于回合的），这些值需要通过JavaScript填充。让我们说我们想在列表中显示它们。

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

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

然后在JavaScript中编辑像getElementById("IntValue").innerHTML = "18";

这样的div

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

哪个更好？我知道这取决于具体情况，但是你能否至少指导我使用JavaScript编写这些东西的一些好资源？

Answer 1

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

但是在你的情况下，你可能想要以不同的方式做事，以这种方式看待它：

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

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

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

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

注意

方法B删除了比方法A更多的元素，请注意，如果你有其他事件处理程序绑定到方法B刷新的元素，你将不得不重新选择这些元素，因为你之前使用的元素将会消失。 / p>
性能明智我不担心方法A或方法B最好。最容易出错的可能就是方法A，因为你正在更新页面上的特定元素（更少的DOM操作意味着更少的错误）。

希望这有助于推动您走向正确的方向，我将框架链接起来以供参考，因为它使用了一种非常酷的方法来显示来自服务器端的数据;）
祝你好运， Sidney Liebrand

JS游戏设计 - 主要是静态的，主要是动态的HTML

1 个答案: