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

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

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

function strrep(str,obj){

return str.replace(/\$\w+\$/gi, function(matchs) {

var returns = obj[matchs.replace(/\$/g, "")];

return typeof returns === "undefined" ? "" : returns;

});

}

strrep(

'', {

"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中，这带来了一些问题，比如应该放在哪个标签里，如何避免解析和图片自动下载。

目前最好的方案是放在

在N年后，也可以把相应的结构放在HTML5定义的新标签中(当它被广泛支持时)。

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

div.hello

p#world= introductions

var jade = require('jade') ;

var template = document.getElementById("theTemplate").innerHTML ;

var compile = jade.compile(template , options);

var html = compile({

introductions: '你好世界'

});

3# 注意提防XSS

一般的模板引擎都会默认转义敏感字符，使用之前好好读一下相关的介绍，什么时候不会做转义处理。

如果是自己实现的模板引擎，就需要手动做转义了，一般而言都需要顾及html special chars如<>\/"'，以及你自己定义的开始、结束符等。

记住一句话：Play safe.