A、baiduTemplate 简介

0、baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎

1、应用场景： 前端使用的模板系统 或 后端Javascript环境发布页面

2、功能概述： 提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据， 生成对应数据产生的HTML片段，渲染不同的效果。

3、特性： 1、语法简单，学习成本极低，开发效率提升很大，性价比较高（使用Javascript原生语法）； 2、默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义； 3、变量未定义自动输出为空，防止页面错乱； 4、功能强大，如分隔符可自定等多种功能；

基本用法

引入文件： baiduTemplate使用仅需引入baiduTemplate.js文件，未压缩是考虑大家调错阅读等方便，上线前请自行压缩代码。

<script type="text/javascript" src="./baiduTemplate.js"></script>

1、放置模板片段： 页面中，模板块可以放在 < 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>

2、调用引擎方式 可以只传入tpl，这时返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的HTML片段

//方法二：先不传入data，返回编译后的函数
var fun = baidu.template(tpl);
//或直接传入id即可
var fun = baidu.template('test1');

//之后通过改变数据，调用缓存下来的函数，产生不同的HTML片段
var html1 = fun(data1);
var html2 = fun(data2);

最后将他们插入到一个容器中即可

document.getElementById('result0').innerHTML=html0;
document.getElementById('result1').innerHTML=html1;
document.getElementById('result2').innerHTML=html2;