javascript - 使用 JavaScript 或 JQuery 生成和附加 HTML 的干净高效的方法是什么？

Question

我正要问this question (直到我发现它已经被问到)现在有了这个问题的答案:

It's better to request JSON from a PHP script and then wrap the results in HTML with JavaScript.

现在我有一个不幸的任务，即用 JavaScript 生成 HTML 以附加到我的文档中，但我不确定如何最好地处理这个问题。

使用 PHP，我可以简单地存储一个 HTML 文件，然后使用 file_get_contents() 和正则表达式用相关信息替换一些标记，但是我认为使用 JavaScript 没那么容易。

我想到的一些方法:

1. 令人反感的方法。生成一个巨大的丑陋字符串，然后附加它:

   var html = '<div class="comment">' +
       '<strong>' + author + '</strong>: ' +
       '<p>' + content + '</p>' +
   '</div>';
   
   $("#comments").append(html);
   

2. 将字符串存储在某处，然后对其使用正则表达式，它可能如下所示:

   var commentHTML = '<div class="cmt"><strong>{auth}</strong>: {cmt}</div>';
   

是否有库/插件可以更好地处理这个问题？用存储在字符串中的 HTML block 来打乱我的 JavaScript 是我真的想避免的事情。也许有一种类似于我提到的使用 PHP 的方法？ JavaScript 可以读取 HTML 文件并将内容存储为字符串吗？

Answer 1

恭喜，您刚刚发明了 Mustache.js。查看:https://github.com/janl/mustache.js

var data = { author: "An Author", content: "Some content" };
var template = "<div class='cmt'><strong>{{author}}</strong>: {{comment}</div>";
var html = Mustache.render(template, data);