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

我正在调用一个web服务，它返回JSON中的对象数组。我想获取这些对象并用HTML填充一个div。假设每个对象都包含一个url和一个名称

如果我想为每个对象生成以下HTML：

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

名称

这方面有最佳实践吗？我可以看到几种方法：

连接字符串

创建元素

使用模板插件

在服务器上生成html，然后通过JSON提供服务

---

前两种选择中的任何一种都是常见的，也是可以接受的

我将在本文中给出每一个例子

方法1：

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

模板化并不是那么不成熟，您可以在大多数主要Javascript框架中看到它

下面是一个例子，它将为您节省性能损失，而且非常非常简单：

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

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

var t=$.template（'${name}'）；
$（选择器）.append（t{
url:jsonObj.url，
名称：jsonObj.name
});

---

我建议走酷路线（性能更好，更易于维护），使用模板。

下面是一个例子，使用我的jQuery插件：

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

var tmpl='#{content}'；
var VAL={
类名：“我的类”，
内容：“这是我的内容。”
};
var html=$.tmpl（tmpl，vals）；

您可以在隐藏的div中将模板HTML添加到页面中，然后使用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*/})

/*CSS*/
.template{显示：无；}
/*Javascript（使用原型）*/
var copy=$$（“.template.container”）[0].cloneNode（true）；
myElement.appendChild（副本）；
$（复制）。选择（“h1”）。每个（函数（e）{/*对h1*/}执行操作）
$（复制）。选择（“img”）。每个（函数（e）{/*对img执行操作*/}）

如果您必须连接字符串，而不是普通字符串：

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

var s=”“；
对于（var i=0；i<200；++i）{s+=“测试”；}

使用临时数组：

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

var s=[]；
对于（var i=0；i<200；++i）{s.push（“testing”）；}
s=s.join（“”）；

---

使用数组要快得多，特别是在IE中。我在不久前用IE7、Opera和FF做了一些字符串测试。Opera只花了0.4秒就完成了测试，但IE7在20分钟后还没有完成！！！！（不，我不是开玩笑。）使用阵列IE非常快

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

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

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

var视图={
网址：“/你好”，
名称：函数（）{
返回'Jo'+'hn'；
}
};
var output=Mustache.render（“{{name}}”，视图）；

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

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

这方面有最佳实践吗？我可以看到几种方法：

连接字符串

创建元素

使用模板插件

在服务器上生成html，然后通过JSON提供服务

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

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

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

这种模式最近经常被采用，整个框架都是围绕这种方法构建的（例如，请参阅backbone.js）

2）出于性能考虑，如果可能，最好将html构建为字符串，然后将其作为一个整体注入页面

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

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

---

我的回答是：你已经朝着正确的方向看了

我建议像我一样，采用介于1和4之间的方法。否则采用web框架或模板引擎

---

只是根据我的经验我的意见

披露：我是鲍勃的维护者

有一个javascript库，可以让这个过程更容易调用。 对于您的具体示例：

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

---

我创建这个库是因为我对jquery和d3之类的替代方案都不满意。代码非常复杂且难以阅读。在我看来，和鲍勃一起工作显然是有偏见的，要愉快得多

---

BOB在Bower上可用，因此您可以通过运行

Bower安装BOB

获得它。几个月前，我本可以在一个大项目上使用类似的东西。是的。简洁整洁！用字符串而不是DOM元素显式生成HTML更高效（假设字符串连接不是真正的问题）和可读性。在IE中，字符串连接总是一个问题。改用数组。我很久以前就换过浏览器了，所以我没有那么痛苦。那是一次可怕的浏览

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

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

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

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

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>"

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>"

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());