javascript - 呈现新内容时的 Ajax 设计/重构帮助 - 如列表项和 div

Question

我在复制标记时经常遇到这种代码味道，但我不确定如何修复它。这是一个典型的用例场景:

假设我们想对某种文章发表评论。在文章下方，我们看到了一堆评论。这些是与原始页面请求一起添加的，并由模板引擎生成(在我的例子中是 Freemarker，但它可以是 PHP 或其他任何东西)。

现在，每当用户添加评论时，我们都想创建一个新的 li 元素并将其注入(inject)当前页面的评论列表中。假设这个 li 包含一堆东西，例如:

1. 用户头像
2. 他们的名字
3. 单击他们的个人资料或向他们发送私有(private)消息的链接
4. 他们写的文字
5. 他们写评论的日期
6. 一些“编辑”和“删除”链接/按钮，前提是当前登录的用户有权执行这些操作。

现在，所有这些东西都已经写在我们最初生成页面的模板中了……所以现在我们必须在 Javascript 中复制它!

当然，我们可以使用另一种模板语言——比如 Jquery 的模板插件——来减轻生成和附加这个新的 li block 的痛苦……但我们最终还是得到了重复的 html 标记，即 < em>略有不同，因为我们不能使用模板语言为我们提供的宏或其他便利。

那么我们如何重构重复项呢？有可能吗，还是我们只能忍受？解决此问题的最佳做法是什么？

Answer 1

这是一个常见问题，并且随着 UI 复杂性的增加变得更加明显，并且必须在服务器和客户端模板上进行更改。这个问题可以通过在客户端和服务器端使用相同的模板标记来解决。模板处理器必须用 JavaScript 和服务器端语言编写。

另外两个比上述方法更干净的解决方案，但都有各自的问题:

• 做客户端的一切
• 做服务器端的一切

如果所有标记的生成都在客户端完成，那么服务器的行为或多或少就像一个网络服务，它只以适合应用程序的任何格式发回数据。 JSON 和 XML 是当今大多数 Web 服务真正流行的格式。客户端总是生成必要的 HTML 和 JS。如果采用这种方法，则必须明确定义客户端和服务器之间的边界。由于客户端对服务器上发生的事情知之甚少，这意味着必须定义正确的错误代码。状态管理将变得更加困难，因为大多数/所有服务器交互将异步发生。使用此方法添加评论的示例可能如下所示:

$('#add-comment').click(function() {
    var comment = $('#comment-box').text();
    $.ajax('http://example.com/add', {
        success: function() {
            addCommentRow(comment);
        },
        ...
    });
});

function addCommentRow(comment) {
    var user = currentUser().name;

    var html = "<li><b>{user}</b> says {comment}</li>";
    html = html.replace("{user}", user).replace("{comment}", comment);

    var item = $('<li>').html(html);
    $('#comments').append(item);
}

另一种方法是在服务器端完成所有工作。每当发生更改时，向服务器发出请求，并向其请求更新的 View 。有了快速的后端、不到一秒的响应时间和适当的网络事件指示器，尽管服务器上发生了所有事情，应用程序应该看起来非常响应。上面的例子将被简化为:

$('#add-comment').click(function() {
    $.ajax('http://example.com/add', {
        success: function(response) {
            $('#comments').html(response);
        },
        ...
    });
});

虽然这在客户端看起来比以前的方法更清晰，但我们只是将标记生成移到了服务器端。但是，如果应用程序不像 Google map 那样非常支持 AJAXy，那么这种方法可能更容易使用。同样，这与应用程序的复杂程度有关，也许维护状态客户端对您来说是必要的，在这种情况下，您可能希望采用之前的方法。