javascript - 页面上的表格太多 - 这是一个问题吗

Question

我正在寻找在编码实践方面最可取的实践

我有一个评论系统，您可以对每条评论进行回复。这让我有几个实现这个的选项(假设后端已经创建)

1. 当用户点击“reply”时，ajax 被触发，获取适当的部分(包括 authenitcation token 等)并将其插入到适当的位置
2. 我为每条评论设置了隐藏表单，点击reply 将使其可见
3. 我使用 javascript 在用户点击回复时即时生成表单并将其插入到点击回复的相应 div 中

我的问题是

for 1 - 这会导致请求、延迟，我不确定这里是否需要 ajax

对于 2 - 页面上的表单太多。想象一下成千上万的评论，所以对于每个评论都会有一个看起来或多或少相同的表单

对于 3 - 我不知道我是否可以在客户端生成真实性 token

表单应该是这样的

        <form accept-charset="UTF-8" action="comments/3/reply" data-remote="true" method="post">
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="J0/asxkDH....vdlKLOUuQ9/TAxACWnZKdwy+c="></div>
                    <textarea id="comment" name="comment" class="tae" style="overflow: hidden;"></textarea>
                    <input name="commit" type="submit" value="Send">
    </form>

Answer 1

我之前遇到过一个类似的案例，我以一个与您的 #1 类似的 Ajax 解决方案结束。

对于#2，是的，表格太多了，即使是隐藏的。我不喜欢这样。

对于#3，我想使用 JS 模板，这是 Backbone 中流行的样式。但是，当时我没有找到成熟且最新的 jQuery 模板解决方案。当时我也没有足够的时间，所以我放弃了。

添加:对于 #3 中的 authenticity_token，我还没有测试过它，但我认为如果表单模板已经输出到 DOM 并准备好 token ，这不会成为问题。它们适用于相同的用户和相同类型的对象。我们只需要更改对象 ID 或其他次要的东西。需要注意的一件事是，一旦成功处理了 Ajax 请求，您需要通过 Ajax 重新加载模板。

我认为#1 很好。不会有太多的 Ajax 请求。用户只会在需要时才请求表单，延迟时间极短，不易察觉。我什至设置了 sleep 来增强加载效果:) 此外，Basecamp 还大量使用 Ajax 来呈现动态的东西。

附言感谢 Leon 修改我的语法:)