使用jsp、php、asp或者后来的struts等等的朋友，不一定知道什么是模版，但一定很清楚这样的开发方式：
代码语言：javascript复制<div class="m-carousel">
<div class="m-carousel-wrap" id="bannerContainer">
</div>
</div>
<ul class="catelist onepx" onepxset="" style="border: 0px; position: relative;" id="navApplication">
<div class="onepxHelper" id="onepx1"></div>
<%for(var i=0,len=data.types.length;i<len;i ){%>
<%var _ = data.types[i];%>
<%if(_.online){%>
<li data-nav="<%=_.type%>">
<i data-nav="<%=_.type%>" class="ico i-cate <%=_.class%> <%if(_.active){%>active<%}%>"></i>
<span data-nav="<%=_.type%>"><%=_.name%></span>
</li>
<%}%>
<%}%>
</ul>各种各样的<%%>标记，这是典型的模板语法，而这就是HTML模版。
在HTML5时代，我们更多使用前端资源静态部署，更多场景下需要使用前端模板库把后台返回的JSON数据填充到页面中。前端使用模版库，比手工拼接字符串要优雅很多。
当然如果后端使用nodejs，前端模版库或者叫js模版库一样能兼容使用。
这里拿一个非常简洁的模版库作为介绍，作者John Resig也就是鼎鼎大名的jQuery创始人。代码只有聊聊可数的十几行：
代码语言：javascript复制// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
// http://ejohn.org/blog/javascript-micro-templating/
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};"
// Introduce the data as local variables using with(){}
"with(obj){p.push('"
// Convert the template into pure JavaScript
str
.replace(/[rtn]/g, " ")
.split("<%").join("t")
.replace(/((^|%>)[^t]*)'/g, "$1r")
.replace(/t=(.*?)%>/g, "',$1,'")
.split("t").join("');")
.split("%>").join("p.push('")
.split("r").join("\'")
"');}return p.join('');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();关键是三部分：
- 使用new Function，让字符串变成函数；
- 使用正则表达式替换拼接，这是最核心部分，也是最优雅的部分；
- 把用户传入的数据data作为作用域（使用with），填充到各个坑。
首先看一个使用例子，从使用的例子慢慢解剖John这个艺术品。
代码语言：javascript复制console.log(tmpl("<span data='<% print(1,2,{}); %>'><%=name?name:1 1 1 %></span>", {name: 'kenko'})); //print后必须加入分号，用于隔开具体的语法就不多解释了，跟underscore的模版库基本一致，大家可以参考一下：http://underscorejs.org/#template
Chrome运行，将得到：
代码语言：javascript复制<span data='12[object Object]'>kenko</span>这里使用了2个特性，一个是<%= %>直接输出value或计算结果，第二个是使用了内置的print方法，可以理解为evaluation，执行一些js逻辑。
那么接下来，我们深入看看模版tmpl函数里边到底做了什么？
1、看看最终生成的Function
代码语言：javascript复制new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};"
"with(obj){p.push('"
"<span data=''); print(1,2,{}); p.push(''>',name?name:1 1 1 ,'</span>"
"');}return p.join('');");Function的语法，大家可以看看w3cschool的解释，足够详细了：http://www.w3school.com.cn/js/pro_js_functions_function_object.asp
Function接受若干个参数，最后一个参数就是函数体字符串，前边的都是参数名。
关键是红色部分，这部分就是那些非常“艺术”的正则匹配替换，最终得到的字符串。
2、逐步看看正则表达替换是如何运作的
代码语言：javascript复制 console.log(
str.replace(/[rtn]/g, " ")
.split("<%").join('t')
.replace(/((^|%>)[^t]*)'/g, "$1r")
.replace(/t=(.*?)%>/g, "',$1,'")
.split(/t/).join("');")
.split("%>").join("p.push('")
.split(/r/).join("\'")
);为了满足我们的窥探欲，我们把模版库的源代码抠出来，逐行打印看看。
代码语言：javascript复制 console.log(
str.replace(/[rtn]/g, " ")
.split("<%").join('t')
// .replace(/((^|%>)[^t]*)'/g, "$1r")
// .replace(/t=(.*?)%>/g, "',$1,'")
// .split(/t/).join("');")
// .split("%>").join("p.push('")
// .split(/r/).join("\'")
);运行将得到：
代码语言：javascript复制<span data=' print(1,2,{}); %>'> =name?name:1 1 1 %></span>可以发现前半部<%都变成了一个制表符t；
再逐行看看后续的输出，可以发现：
代码语言：javascript复制 console.log(
str.replace(/[rtn]/g, " ")
.split("<%").join('t')
.replace(/((^|%>)[^t]*)'/g, "$1r") //关键一笔，为了兼容单引号，把单引号换成r。<span data= tr print(1,2,{}); %> r > t =name?name:1 1 1 %></span>
.replace(/t=(.*?)%>/g, "',$1,'") //核心，$1对应的就是括号内的内容，这个是正则表达式的功能。<span data= tr print(1,2,{}); %> r >',name?name:1 1 1 ,'</span>
.split(/t/).join("');") //跟上边的关键一笔对应。<span data= r '); print(1,2,{}); %> r >',name?name:1 1 1 ,'</span>
.split("%>").join("p.push('") //<span data= r '); print(1,2,{}); p.push(' r >',name?name:1 1 1 ,'</span>
.split(/r/).join("\'") //<span data=''); print(1,2,{}); p.push(''>',name?name:1 1 1 ,'</span>
);john巧妙的利用r、t分别代表了单引号( ' )、左标记( <% )，因为这两个符号在后续的字符串替换中会有干扰，尤其是单引号，这也是我为什么在例子中故意让span的data属性用单引号包裹的原因。
配合前后的两句固定语句，其实就是把整个模版，换成一段代码：
代码语言：javascript复制with(obj){
p.push('<span data='');
print(1,2,{});
p.push(''>'',name?name:1 1 1 ,'</span>');
}
return p.join('');大概可以理解为：
代码语言：javascript复制<% ====> ')
%> ====> p.push('
= ====> ,$1,原理就是字符串拼接，很简单，但正则表达式这种艺术范，我只能说只可意会不可言传了，对john的膜拜之情油然而生。
================================没有意义的分割线======================================
话锋一转，虽然john这个艺术品绝对的牛逼，但这个模版库不是绝对的好用。在实际开发中，我们需要时刻谨记XSS防范，在传统的jquery修改innerHTML的做法中，很容易中XSS。
而模版库到了最后，一样需要通过innerHTML注入到dom中。
那么，要么我们在传递给模版库前，自己对数据做足够的XSS检查，尤其是来自用户或第三方的数据，如果没有做特殊字符转义，就很容易受到XSS攻击。
一般简单来说，我们可以对准备填充的数据做简单的处理，关键是&"'等字符：
代码语言：javascript复制 var esc = function (s) {
return s.toString()
.replace(/&#(d{1,3});/g, function (r, code) { //这里目的是防止重复执行esc，导致一些字符重复转义
return String.fromCharCode(code);
}).replace(/[&'"<>/\-x00-x09x0b-x0cx1fx80-xff]/g, function (r) {
return "&#" r.charCodeAt(0) ";"
}).replace(/javascript:/g, "");
};那么，如果模版库统一做XSS转义，事情就肯定能变得更简单。
所以，我们尝试把esc函数加入到模版库中。
模版库把用户数据注入dom的地方有两个：
- print函数
- .replace(/t=(.*?)%>/g, "',$1,'")，也就是<%=name %>这样的地方。
由于new Function把函数体字符串变成实际函数，所以在函数中无法像平时那样，访问当前上下文（闭包），只能访问Function构建时指定的参数或者全局变量/方法。
那么，我们可以把esc作为参数，传给Function，模版库最终改为：
代码语言：javascript复制 var fn = !/W/.test(str) ?
cache[str] = (cache[str] || tmpl(document.getElementById(str).innerHTML)) :
new Function("obj", "esc",
"var p=[],print=function(){for(var i=0;i<arguments.length;i ){p.push(esc(arguments[i]));}};"
"with(obj){p.push('"
str.replace(/[rtn]/g, " ")
.split("<%").join('t')
.replace(/((^|%>)[^t]*)'/g, "$1r")
.replace(/t=(.*?)%>/g, "',esc($1),'") //esc不能是外部的局部变量，无法形成闭包。所以要么在函数内定义，要么做成全局函数，又或者作为参数
.split(/t/).join("');")
.split("%>").join("p.push('")
.split(/r/).join("\'")
"');}return p.join('');");
// Provide some basic currying to the user
return data ? fn(data, esc) : function(param){return fn(param, esc)}; //curry办法。先返回一个编译好的render函数，用户可以延迟渲染来个攻击的例子看看效果：
代码语言：javascript复制 var name = '<script>alert(1)</script>呵呵呵呵呵';
var age = ''onclick="alert(1)'
document.write(template('<span data="<%=age %>"><%=name %></span>', {name: name, age: age}));假设我们获取url参数name和age，然后直接填入到页面中。如果使用原版的模版库，我们马上能看到。。。alert。。。当然，黑客可以换成实际有意义的代码，例如获取你密码，发个微博，发个空间，甚至转走你的虚拟金币。
仔细一看，dom满满都是攻击的代码
不单是页面刚打开的script标签式攻击，还有span节点的onclick攻击，当点击span的时候，又会执行一段js。。。
接下来，我们见证一下神奇的时刻！！！换成加入了XSS自动转义的模版库。
两处的攻击都被过滤了，只剩下乖巧的纯文本。嘿嘿
最后，说点关于underscore的，underscore的模版库原理跟john这个精简版类似，也是正则 字符串替换。
不过，不同点是，underscore更完善一些，它提供了两种注入数据的方式：
- <%=name %>，这个跟john的一样，没有做任何过滤；
- <%-name %>，这个有做几个关键字符的转义，包括& " '
当然，我们也可以把第一种模式也做成自动转义，正如我现在项目就需要这么搞。。。大概就是1239行那些代码，以下红色部分就是我修改的内容。
代码语言：javascript复制 if (escape) {
source = "' n((__t=(" escape "))==null?'':_.escape(__t)) n'";
}
if (interpolate) {
source = "' n((__t=(" interpolate "))==null?'':_.escape(__t)) n'";
}
if (evaluate) {
source = "';n" evaluate "n__p ='";
}
index = offset match.length;
return match;
});
source = "';n";
// If a variable is not specified, place data values in local scope.
if (!settings.variable) source = 'with(obj||{}){n' source '}n';
source = "var __t,__p='',"
"print=function(){for(var i=0;i<arguments.length;i ){__p = _.escape(arguments[i]);}};n"
source "return __p;n";
