111

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

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

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

对此有最佳做法吗?我可以看到几种方法:

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

8 回答 8

69

选项 #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
});

我说走很酷的路线(性能更好,更易于维护),并使用模板。

于 2008-10-21T03:01:27.723 回答
14

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

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

于 2008-11-20T09:43:43.603 回答
9

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

我将在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
于 2008-10-21T02:56:01.947 回答
7

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

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);
于 2008-10-21T03:32:35.693 回答
7

也许更现代的方法是使用诸如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。

于 2014-05-15T06:25:30.963 回答
4

您可以将模板 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*/})
于 2008-10-21T22:32:57.560 回答
4

披露:我是 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 一起工作在我看来,这显然是有偏见的,要愉快得多。

BOB 在Bower上可用,因此您可以通过运行获得它bower install BOB

于 2015-04-03T14:43:00.063 回答
2

对此有最佳做法吗?我可以看到几种方法:

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

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

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

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

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

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

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

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


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

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

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

于 2014-05-15T07:02:55.030 回答