百度JS模板引擎 baiduTemplate 1.0.6 版
A、baiduTemplate 简介
0、baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎
注：等不及可以直接点左侧导航中的”C、使用举例“，demo即刻试用。1、应用场景：
前端使用的模板系统 或 后端Javascript环境发布页面
http://tangram.baidu.com/BaiduTemplate
2、功能概述：
提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，
生成对应数据产生的HTML片段，渲染不同的效果。
3、特性：
1、语法简单，学习成本极低，开发效率提升很大，性价比较高（使用Javascript原生语法）；
2、默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义；
3、变量未定义自动输出为空，防止页面错乱；
4、功能强大，如分隔符可自定等多种功能；
B、使用举例
//直接复制即可使用，记得要下载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>
C、基本用法
0、引入文件：
baiduTemplate使用仅需引入baiduTemplate.js文件，未压缩是考虑大家调错阅读等方便，上线前请自行压缩代码。
<script type="text/javascript" src="./baiduTemplate.js"></script>
如果在nodejs环境中使用，可以通过npm包管理安装
//注意：名称全部小写
npm install baidutemplate1、放置模板片段：
页面中，模板块可以放在 <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 = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";
2、调用引擎方式
（1）、数据结构是一个JSON，如：
var data={
title:'baiduTemplate',
list:[
'test data 1',
'test data 2',
'test data3'
]
}
（2）、baiduTemplate占用baidu.template命名空间
//可以付值给一个短名变量使用
var bt = baidu.template;
（3）、方法一：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);
（4）、最后将他们插入到一个容器中即可
document.getElementById('result0').innerHTML=html0;
document.getElementById('result1').innerHTML=html1;
document.getElementById('result2').innerHTML=html2;
3、模板基本语法（默认分隔符为<% %>，也可以自定义）
分隔符内语句为js语法，如：
<% 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>
<%}%>
4、不推荐使用功能
用户可以自定义分隔符，默认为 <% %>，如：
//设置左分隔符为 <!
baidu.template.LEFT_DELIMITER='<!';
//设置右分隔符为 <!
baidu.template.RIGHT_DELIMITER='!>';
自定义默认输出变量是否自动HTML转义
//设置默认输出变量是否自动HTML转义，true自动转义，false不转义
baidu.template.ESCAPE = false;
D、性能相关数据
前端模板引擎在传统桌面电脑的浏览器端编译模板并渲染页面，无较大的性能开销。但在移动端上面，性能数据较为重要，故发布移动端性能数据列表，希望能够给各位开发者提供一个参考。
总结：编译执行时间（前端模版编译以及json被转换为html字符串的时间）范围约在10~90毫秒，大部分集中在20~60毫秒之间。Dom 渲染时间（html字符串通过dom.innerHTML被插入到div里的时间）范围约在40~160毫秒，大部分集中在50~130毫秒之间。测试页 面（50条数据记录）：http://tieba.baidu.com/tb/test/s.html（数据在页面多次刷新时会有一些小范围浮动，只反映 大致情况，2012-09-20 百度贴吧整理）
E、特别鸣谢
感谢各位业内的高手们对baiduTemplate的帮助！
感谢百度贴吧的大力支持，并且给出了移动端的测试数据，目前baiduTemplate使用在贴吧等百度移动端的产品上面，特别感谢这些产品的工程师们，也感谢各位业内使用者们！
感谢 @灰大、感谢 @王集鵠、感谢 @黄志龙、感谢 @严孙荣、感谢 @berg、感谢 @黄方荣、感谢 @rayi-、感谢 @东杰、感谢 @杨尊程、感谢 @冯威风、感谢 @糖饼、感谢 @风之石 、感谢 @貘大等等，感谢各位在使用的开发者们！
F、change log
1.0.6版本
重构代码，修正自定义变量加分号语法错误的bug，增加对版本号的标注 baidu.template.versions
1.0.5版本
修改可能造成内存泄露的变量及方法直接挂在baidu.template命名空间下
1.0.4版本
经过第三方测试反馈，进行对编译后产生的函数性能优化，性能提高1/3以上
1.0.3版本
通过产品线反馈，经过讨论增加自定义是否默认转义接口 baidu.template.ESCAPE
1.0.2版本
优化正则，提升性能，修复bug，支持nodejs，支持npm install baidutemplate可以安装
1.0.1版本
优化正则，提升性能，修复bug
百度JS模板引擎 baiduTemplate 1.0.6 版的更多相关文章
- baiduTemplate.js 百度JS模板引擎
baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 先展示两个例子,然后说说对baidutemplate.js的理解,从而将这一工具加到个人百宝箱里. <script id ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- 百度JS模板引擎
1. 应用场景 前端使用的模板系统 或 后端Javascript环境发布页面 2. 功能描述 提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同 ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- 浅析js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Epii.js 一个极其简单的Js模板引擎
Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...
随机推荐
- ipv4属性无法打开
设置开机启动项: 点击左下角开始或windows+R-->msconfig 打开组策略:Windows+R-->输入gpedit.msc ipv4属性打不开 经过查看组策略什么未配置 ...
- 克隆git仓库中的一个分支
克隆git仓库中的某一个分支,可用如下命令: git clone -b <branch_name> <repo> 如:git clone -b hdcp_ree_tee_dev ...
- MySQL之索引优化
很多数据库系统性能不理想是因为系统没有经过整体优化,存在大量性能低下的SQL 语句.这类SQL语句性能不好的首要原因是缺乏高效的索引.没有索引除了导致语句本身运行速度慢外,更是导致大量的磁盘读写操作, ...
- hdu 3045 Picnic Cows(斜率优化DP)
题目链接:hdu 3045 Picnic Cows 题意: 有n个奶牛分别有对应的兴趣值,现在对奶牛分组,每组成员不少于t, 在每组中所有的成员兴趣值要减少到一致,问总共最少需要减少的兴趣值是多少. ...
- NEUQ1051: 谭浩强C语言(第三版)习题6.7
//C代码简直难看到家,求大神知道如何写出复用性好的,维护性强的代码... //格式错误了好几次,最后发现是are和数字之间多了个空格......本来一直以为是最后的换行多了,费劲搞掉了. #incl ...
- 每天点滴的进行，css+div简单布局...布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 手动添加PopMenu出现的问题
最近在github上找了个比较酷的弹出菜单PopMenu用来做分享页面,demo下载运行OK,于是拖进项目中,一编译就呵呵了.... 一看demo目录,原来这还还引用了其他库,于是把pod下面的pop ...
- sharepoint:拥有完全控制权限的用户依然“拒绝访问”
//来源 http://www.cnblogs.com/jindahao/archive/2012/04/25/2468714.html 遇到问题: 拥有完全控制权限的用户依然拒绝访问. 可能的原因: ...
- 【git】TurtoiseGit使用手册
A,创建本地分支 操作:Create Branch ->输入本地分支名 -> OK B,创建本地分支和远程分支的映射 操作: 1,拉取远程分支:Fetch -> 选中Arbitray ...
- Chronodex：视觉时间管理，让你的生活更有序
我喜欢把时间安排的有条不紊,看看清晰的时间安排心理有种踏实感,只有你是"纸爱好者" - 才能最终寻找完美组织时间的方式方法. 我记得自从我是一个小女孩以来,我喜欢纸和笔和颜色和标记 ...