是否有使用 javascript 生成 html 的最佳实践

选项 #1 和 #2 将是您最直接的直接选项，但是，对于这两个选项，您将通过构建字符串或创建 DOM 对象来感受到性能和维护的影响。

模板并不是那么不成熟，你会在大多数主要的 Javascript 框架中看到它弹出。

这是 JQuery Template Plugin 中的一个示例，它可以为您节省性能损失，并且非常非常简单：

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

我说走很酷的路线（性能更好，更易于维护），并使用模板。

---

如果您绝对必须连接字符串，而不是正常的：

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

使用临时数组：

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

使用数组要快得多，尤其是在 IE 中。不久前，我用 IE7、Opera 和 FF 对字符串进行了一些测试。 Opera 只用了 0.4s 就完成了测试，而 IE7 却在 20 分钟后没有完成！！！ （不，我不是在开玩笑。） 用数组 IE 非常快。

---

前两个选项中的任何一个都是常见且可接受的。

我将在 Prototype 中给出每个示例。

// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }

方法#1：

var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom

方法#2：

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom

---

下面是一个示例，使用我的 Simple Templates jQuery 插件：

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);

---

也许更现代的方法是使用模板语言，例如 Mustache，它具有多种语言的实现，包括 javascript。例如：

var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

您甚至可以获得额外的好处 - 您可以在其他地方重用相同的模板，例如服务器端。

如果您需要更复杂的模板（if 语句、循环等），您可以使用Handlebars，它具有更多功能，并且与 Mustache 兼容。

---

您可以将模板 HTML 添加到隐藏 div 中的页面，然后使用 cloneNode 和您喜欢的库的查询工具来填充它

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})

---

披露：我是 BOB 的维护者。

有一个名为 BOB 的 JavaScript 库可以让这个过程变得更容易。

对于您的具体示例：

<div><img src="the url" />the name</div>

这可以通过以下代码使用 BOB 生成。

new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

或者使用更短的语法

new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

这个库非常强大，可用于创建带有数据插入的非常复杂的结构（类似于 d3），例如：

data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

BOB 目前不支持将数据注入 DOM。这是在todolist上。现在，您可以简单地将输出与普通的 JS 或 jQuery 一起使用，并将其放在您想要的任何位置。

document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());

我制作这个库是因为我对 jquery 和 d3 等任何替代品都不满意。代码非常复杂且难以阅读。和 BOB 一起工作在我看来，这显然是有偏见的，要愉快得多。

Bower 上提供了 BOB，因此您可以通过运行 bower install BOB 来获得它。

---

对此有最佳做法吗？我可以看到几种方法： 连接字符串 创建元素 使用模板插件 在服务器上生成 html，然后通过 JSON 提供服务。

1) 这是一个选项。在客户端使用 JavaScript 构建 html，然后将其作为一个整体注入 DOM。

请注意，这种方法背后有一个范例：服务器只输出数据，并且（在交互的情况下）从客户端异步接收数据，并使用 AJAX 请求。客户端代码作为独立的 JavaScript Web 应用程序运行。

Web 应用程序可以运行，呈现界面，即使服务器没有启动（当然它不会显示任何数据或提供任何类型的交互）。

这种范式最近经常被采用，整个框架都是围绕这种方法构建的（例如，参见主干.js）。

2) 出于性能原因，如果可能，最好将 html 构建成一个字符串，然后将其作为一个整体注入到页面中。

3) 这是另一种选择，以及采用 Web 应用程序框架。其他用户发布了各种可用的模板引擎。我的印象是你有能力评估他们并决定是否走这条路。

4）另一种选择。但将其作为纯文本/html 提供；为什么是 JSON？我不喜欢这种方法，因为将 PHP（您的服务器语言）与 Html 混合在一起。但我经常采用它作为选项 1 和 4 之间的合理折衷。

我的回答：你已经在寻找正确的方向。

我建议像我一样采用 1 到 4 之间的方法。否则采用 Web 框架或模板引擎。

只是根据我的经验我的看法...

---