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

Question

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

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

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

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

1. 连接字符串
2. 创建元素
3. 使用模板插件
4. 在服务器上生成html,然后通过JSON提供.

Answer 1

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

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

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

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

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

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

Answer 2

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

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非常快.

Answer 3

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

我将举例说明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

Answer 4

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

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

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

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

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

Answer 5

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

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

Answer 6

您可以将模板 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*/})