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

https://stackoverflow.com/questions/220603

03-07-2019
|

题

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

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

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

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

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

解决方案

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

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

以下是 JQuery模板插件中的一个示例，可以帮助您节省性能，并且真的，非常简单：

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

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

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

其他提示

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

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

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

我将在原型中举例说明每一个。

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

以下是一个示例，使用我的 简单模板 jQuery的插件：

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

或许更现代的方法是使用模板语言，例如 Mustache ，它具有实现在许多语言，包括JavaScript。例如：

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

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

您甚至可以获得额外的好处 - 您可以在其他地方重复使用相同的模板，例如服务器端。

如果您需要更复杂的模板（如果语句，循环等），您可以使用 Handlebars 功能，并与Mustache兼容。

您可以在隐藏的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*/})

披露：我是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。这是在待办事项清单上。现在，您可以简单地将输出与普通 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 install BOB.

这是最好的做法吗？我可以看到一些方法：


连接字符串

创建元素

使用模板插件

在服务器上生成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框架或模板引擎。

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

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

有一个 javascript 库可以使这个过程变得更容易，称为 鲍勃.

有一个 javascript 库可以使这个过程变得更容易，称为鲍勃.