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

challenger
  • 1.7k

比如类似于这样的代码(或更复杂的拼接结构):

var html = '';

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

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

';
}

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

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

回复
阅读 17.1k
11 个回答
Humphry
  • 16.4k

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.

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

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

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

AntonyBi
  • 1.3k

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

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

劣势:

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

后端模板可以选择的有很多,比如FreemarkerJSTLvelocity

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

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

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

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

宣传栏