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

Question

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

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

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

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

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

Answer 1

也许更现代的方法是使用模板语言，例如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。

Answer 2

披露：我是 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 获得它。

Answer 3

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

1. 连接字符串
2. 创建元素
3. 使用模板插件
4. 在服务器上生成 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 框架或模板引擎。

根据我的经验，我的意见...

Answer 4

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

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

Answer 5

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

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 MINUTES 还没有完成！！！ （不，我不是在开玩笑。） 用数组 IE 非常快。

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*/})

Answer 7

这是一个示例，使用我的 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);

Answer 8

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

我将在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