百度JS模板引擎

1. 应用场景

前端使用的模板系统  或  后端Javascript环境发布页面

2. 功能描述

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

3. 特性

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

4. 使用步骤

1）在页面中引入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 = {username:"username"}
//数组
var data={testarr:['test data 1','test data 2','test data3']}
//对象
var data =
 {person:"id":4,"username":"king","password":"123456","age":19}}
//list集合
var data = {list: [{"id":1,"username":"king","password":"1","age":25},{"id":2,"username":"king","password":"11","age":19},{"id":3,"username":"king","password":"11","age":19},{"id":4,"username":"king","password":"123456","age":19}]}

4)  数据传入模板，生成html片段

   方法一： 传入模板的同时，也传入数据

   如果模板片段是script或者在textarea中定义的，则使用id传入方法,

// 'test1'表示模板片段中的id号， data表示准备的模板数据
var data_html = baidu.template('test1',data); 

 如果是像tpl一样保存在变量中时，格式类似，如下

//tpl表示定义的模板变量
var data_html = baidu.template(tpl, data)

 

 方法二：传入模板后，不传数据，可以当做一个函数使用，这样就分两步操作。

//传入模板
var fun1 = baidu.template('test1');
var fun2 = baidu.template(tpl);

//使用上面的函数
var data_html = fun1(data)
var data_html = fun2(data)

上面两种方法中，方法二将模板封装为函数，可以多次调用。

所以 如果是一个通用的模板建议使用方法二，否则使用方法一。具体根据实际情况来。

如果觉得baidu.template比较长，也可以定义一个别名如 var bt = baidu.template;

5） 使用生成的html片段

//js中使用html片段填充下面的div
document.getElementById('div_1').innerHTML=data_html;


//定义空的div容器
<div id ='div_1'></div>

5. 如何书写模板

在4.2中简单说明了定义模板的格式，下面具体说明如何定义模板，以下使用script为例子

<%  %>表示分隔符，分隔符内语法为js语法：

//输出单个变量
<%=title%>

//if判断
<%if(list.length){%>
    <h2><%=list.length%></h2>
<%}else{%>
    <h2>list长度为0<h2>
<%}%>

//for循环
<%for(var i=0;i<list.length;i++){%>
     <li><%=list[i]%></li>
<%}%>

//关于转义，默认html转义，如果不转义，使用如下
<%:=title%> 或 <%-title%>

//另外有个全局转义变量控制
//设置默认输出变量是否自动HTML转义，true自动转义，false不转义
baidu.template.ESCAPE = false;

//模板内注释
<!-- 模板中可以用HTML注释 -->  或  <%* 这是模板自带注释格式 *%>

 

到此结束，非常简单。上面这些都是摘自官网的说明。

一般应用在轻量级的前端开发中，单纯使用js来开发的前端页面，如移动h5的开发，避免使用jquery等重量级的前端框架影响性能。

baidu.template.js下载地址(不确定是不是官方出品的)：http://baidufe.github.io/BaiduTemplate/