百度JS模板引擎 baiduTemplate 1.0.6 版
应用在前端模版系统或则后端JavaScript的环境发布页面，它提供了一套模版语法，用户可以写一个模版区块，每次根据传入的数据生成对应数据产生的Html，渲染不同界面效果；它的优点：愈发简单，学习成本极低，开发效率提升很大，采用javascript的原生语法，所以效率比较高， 默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义，变量未定义自动输出为空，防止页面错乱，功能强大，如分隔符可自定等多种功能；
下面是一个应用举例：
//直接复制即可使用，记得要下载baiduTemplate.js //index.html <!doctype html> <html> <head> <meta charset="utf-8"/> <title>test</title> <!-- 引入baiduTemplate --> <script type="text/javascript" src="./baiduTemplate.js"></script> </head> <body> <div id='result'></div> <!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 --> <script id="t:_1234-abcd-1" type="text/html"> <div> <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 --> <!-- 输出变量语句，输出title --> <h1>title:<%=title%></h1> <!-- 判断语句if else--> <%if(list.length>1) { %> <h2>输出list，共有<%=list.length%>个元素</h2> <ul> <!-- 循环语句 for--> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>没有list数据</h2> <%}%> </div> </script> <!-- 模板1结束 --> <!-- 使用模板 --> <script type="text/javascript"> var data={ "title":'欢迎使用baiduTemplate', "list":[ 'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API', 'test2:', 'test3:', 'test4:list[5]未定义，模板系统会输出空' ] }; //使用baidu.template命名空间 var bt=baidu.template; //可以设置分隔符 //bt.LEFT_DELIMITER='<!'; //bt.RIGHT_DELIMITER='!>'; //可以设置输出变量是否自动HTML转义 //bt.ESCAPE = false; //最简使用方法 var html=bt('t:_1234-abcd-1',data); //渲染 document.getElementById('result').innerHTML=html; </script> </body> </html>
基本的用法很简单，待我慢慢讲解
1.引入文件
baiduTemplate使用仅需引入baiduTemplate.js文件；
<script type="text/javascript" src="./baiduTemplate.js"></script>
2.放置模板片段
页面中，模版块可以放在<script>中，设置type属性为text/template或text/html，用id标识，如：
<script id='test1' type="text/template"> <!-- 模板部分 --> <!-- 模板结束 --> </script>
或者存放在 <textarea> 中，一般情况设置其CSS样式display:none来隐藏掉textarea，同样用id标识，如：
<textarea id='test2' style='display:none;'> <!-- 模板部分 --> <!-- 模板结束 --> </textarea>
模板也可以直接存储在一个变量中
var tpl = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";
3.调用引擎的方式
模版数据结构是一个JSON，可以从服务器端加载过来，数据结构如：
var data={ title:'baiduTemplate', list:[ 'test data 1', 'test data 2', 'test data3' ] }
baiduTemplate占用baidu.template命名空间，调用方法1：
tpl是传入的模板(String类型)，可以是模板的id也可以是一个模板片段字符串，传入模板和对应数据返回对应的HTML片段；如下：
//方法一：直接传入data，返回编译后的HTML片段 var html0 = baidu.template(tpl,data); //或直接传入id即可 var html0 = baidu.template('test1',data);
方法二：或者可以只传入tpl，这时返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的HTML片段，如下：
//方法二：先不传入data，返回编译后的函数 var fun = baidu.template(tpl); //或直接传入id即可 var fun = baidu.template('test1'); //之后通过改变数据，调用缓存下来的函数，产生不同的HTML片段 var html1 = fun(data1); var html2 = fun(data2);
最后把生成的html插入到一个容器里面即可，如下：
document.getElementById('result0').innerHTML=html0; document.getElementById('result1').innerHTML=html1; document.getElementById('result2').innerHTML=html2;
基本的使用方法就这么多，是不是很简单啊，下面介绍一下模版的基本的语法，模版的语法自认为和webform的语法基本类似，所以学过webform的朋友一看就懂了
模版的分隔符为<%%>，也可以自定义，自定义的语法如下：
//设置左分隔符为 <! baidu.template.LEFT_DELIMITER='<!'; //设置右分隔符为 <! baidu.template.RIGHT_DELIMITER='!>';
自定义默认输出变量是否自动HTML转义，语法如下：
//设置默认输出变量是否自动HTML转义，true自动转义，false不转义 baidu.template.ESCAPE = false;
模版的是在分隔符内写，模版的语法也就是js的语法和webform的一些语法，如：
<% var test = function(){ //函数体 }; if(1){}else{}; function testFun(){ return; }; %>
假定事先设置数据为
var data={ title:'baiduTemplate', list:['test1<script>','test2','test3'] }
模版的注释方法：
<!-- 模板中可以用HTML注释 --> 或 <%* 这是模板自带注释格式 *%> <% //分隔符内支持JS注释 %>
输出变量的方法如下：
//默认HTML转义，如果变量未定义输出为空 <%=title%> //不转义 <%:=title%> 或 <%-title%> //URL转义，UI变量使用在模板链接地址URL的参数中时需要转义 <%:u=title%> //UI变量使用在HTML页面标签onclick等事件函数参数中需要转义 //“<”转成“<”、“>”转成“>”、“&”转成“&”、“'”转成“\'” //“"”转成“\"”、“\”转成“\\”、“/”转成“\/”、\n转成“\n”、\r转成“\r” <%:v=title%> //HTML转义（默认自动） <%=title%> 或 <%:h=title%>
判断语句语法如下：
判断语句 <%if(list.length){%> <h2><%=list.length%></h2> <%}else{%> <h2>list长度为0<h2> <%}%>
循环语句语法如下：
<%for(var i=0;i<list.length;i++){%> <li><%=list[i]%></li> <%}%>
BaiduTemplate的在线体验调试地址：http://tangram.baidu.com/BaiduTemplate/debug/
