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

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

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

the name

这是最好的做法吗？我可以看到几种方法:

连接字符串

创建元素

使用模板插件

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

Jim Fiorato.. 66

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

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

这是JQuery模板插件中的一个示例,可以为您节省性能,实际上非常简单:

var t = $.template('
${name}
');

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

我说走酷路线(更好的表现,更易于维护),并使用模板.

1> Jim Fiorato..：

---

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

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

这是JQuery模板插件中的一个示例,可以为您节省性能,实际上非常简单:

var t = $.template('
${name}
');

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

我说走酷路线(更好的表现,更易于维护),并使用模板.

---

JQuery模板似乎已经死了,请参阅http://stackoverflow.com/questions/7911732/jquery-templates-are-deprecated

---

@Jim Fiorato:链接死了:s

---

Adrien指出,链接已经死了.建议你更新你的答案包括:[Mustache.js](https://github.com/janl/mustache.js)

2> some..：

---

如果你绝对必须连接字符串,而不是正常的:

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.4秒就完成了测试,但IE7在20分钟后还没完成!(不,我不是在开玩笑.)随着阵列IE非常快.

3> savetheclock..：

---

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

我将举例说明Prototype中的每个例子.

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

方法#1:

var html = "
 #{name}
".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

4> Tzach..：

---

也许更现代的方法是使用模仿语言,例如Mustache,它具有多种语言的实现,包括javascript.例如:

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

var output = Mustache.render('
{{name}}
', view);

您甚至可以获得额外的好处 - 您可以在其他位置重用相同的模板,例如服务器端.

如果您需要更复杂的模板(如果语句,循环等),您可以使用具有更多功能并与Mustache兼容的Handlebars.

5> Andrew Hedge..：

---

这是一个例子,使用我的简单模板插件为jQuery:

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