JavaScript如何避免拼接html字符串？

Question

比如类似于这样的代码（或更复杂的拼接结构）：

var html = '';

for (var i = 0; i < data.len; i++) {
    html += '

<div>' + data[i] + '</div>

';
}

$('#content').html(html);

该如何优化，或者避免这样的拼接循环？感觉这样的循环效率很低。

Answer 1

1# 模板引擎是一个很好的方案，解决了数据和文档结构的耦合

最简的模板引擎大致是这样的：

function strrep(str,obj){
    return str.replace(/\$\w+\$/gi, function(matchs) {
        var returns = obj[matchs.replace(/\$/g, "")];
        return typeof returns === "undefined" ? "" : returns;
    });
} 
strrep(
    '<img src="$thesrc$" class="$theclass$">', {
        "thesrc":"http://s.segmentfault.com/img/logo.png?coiweJ" ,
        "theclass":"fl tc"
    }
)

单纯的模板引擎如：Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等等；
前端的有 Model -> View 对应的框架也包含模板引擎，如backbone、avalon、angular等，司徒正美在这个回答里列举了一些MVVM框架，可以了解一下。

2# 文档结构文本不应当在js中以字符串字面量的形式表示

一般而言我们放在HTML中，这带来了一些问题，比如应该放在哪个标签里，如何避免解析和图片自动下载。
目前最好的方案是放在<script type="text/html">或者<script type="text/template">中；
在N年后，也可以把相应的结构放在HTML5定义的新标签<template>中（当它被广泛支持时）。

比如我们用到了jade作为引擎，那么代码大致是这样的：

<script type="text/template" id="theTemplate">
    div.hello
        p#world= introductions
</script>
<script>
    var jade = require('jade') ;
    var template = document.getElementById("theTemplate").innerHTML ;
    var compile = jade.compile(template , options);
    var html = compile({
        introductions: '你好世界'
    });
</script>

3# 注意提防XSS

一般的模板引擎都会默认转义敏感字符，使用之前好好读一下相关的介绍，什么时候不会做转义处理。
如果是自己实现的模板引擎，就需要手动做转义了，一般而言都需要顾及html special chars如<>\/"'，以及你自己定义的开始、结束符等。

记住一句话：Play safe.

Answer 2

题主在题目中描述的主要担忧是效率, 然后一堆同学上来给出了效率更低的方案 (各种 template engine), 一个指出效率不是问题的同学的答案居然还被点了反对,,, 这也是醉了.

首先题主完全不用担心效率, 因为大头在浏览器解析和渲染上 (这两者中的大头又是渲染), 字符串拼接的消耗可以忽略不计. 其次再说各种模板引擎的问题, 题主可以根据自己的需要选择或种或轻的模板引擎, 如果有必要还可以直接上 MVC/MVVM 框架.

Answer 3

如果想生成html code的话，用模版引擎更好一些吧，例如：underscore里的_.template之类的，就能完成你想要的事情，你还不用考虑html拼接

Answer 4

大家都在推崇前端js模板，我个人更倾向于后端模板。这里比较一下这两者的优劣：
优势：

1. 前端人员完成全部相关工作，与后端只交互数据即可，工作范围划分明确。
2. 前端模板可以把html代码块拆分，重新进行排列组合，更加灵活。

劣势：

1. 前端模板需要浏览器渲染，会出现短暂的空白再跳出来数据，体验不好。而且发送异步请求，肯定会有加载时差，用bigpipe这样的技术去优化也会增加使用的复杂度。
2. 前端模板写出来的代码块与实际调用的地方是分开的，IDE对JS模板插件支持一般不好，阅读代码会有些麻烦。
3. 前端模板html是需要拼接，会与最终生产的代码不一样，而后端模板看到的基本上就是接近于最终html。

后端模板可以选择的有很多，比如Freemarker、JSTL、velocity。

第一次给自己答案写这么多评论，再重申一下，当然有些场景是非常适合甚至只能用前端模板的，对于SEO等要求肯定只能用后端模板，而且具体的技术选型也要根据团队的技术储备等众多因素去考虑。

Answer 5

可以试试 Handlebars.js

Answer 6

在现代的浏览器里，用+拼接字符串效率已经不低了，题主可以做做实验

Answer 7

for (var i = 0; i < data.len; i++) {
var div = $("

");
div.html(data[i]);
html.append(div);
}
$('#content').html(html);

Answer 8

我也想知道有没有更好的方法

jsvar arr = ['con1', 'con2', 'con3']
var div = '<div>' + arr.join('</div><div >') + '</div>'
console.log(div)

Answer 9

一直在用handlebars

Answer 10

有次面试被问到用没用到js 模板，当时好像是没有回答出来啊

Answer 11

Angular解决妥妥滴