天天看点

百度html模板引擎,BaiduTemplatetitle:

百度JS模板引擎 baiduTemplate 1.0.6 版

A、baiduTemplate 简介

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

注:等不及可以直接点左侧导航中的”C、使用举例“,demo即刻试用。

1、应用场景:

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

2、功能概述:

提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,

生成对应数据产生的HTML片段,渲染不同的效果。

3、特性:

1、语法简单,学习成本极低,开发效率提升很大,性价比较高(使用Javascript原生语法);

2、默认HTML转义(防XSS攻击),并且支持包括URL转义等多种转义;

3、变量未定义自动输出为空,防止页面错乱;

4、功能强大,如分隔符可自定等多种功能;

B、使用举例

//直接复制即可使用,记得要下载baiduTemplate.js

//index.html

test

title:

1) { %>

输出list,共有个元素

没有list数据

var data={

"title":'欢迎使用baiduTemplate',

"list":[

'test1:默认支持HTML转义,如输出

'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;

C、基本用法

0、引入文件:

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

如果在nodejs环境中使用,可以通过npm包管理安装

//注意:名称全部小写

npm install baidutemplate

1、放置模板片段:

页面中,模板块可以放在

或者存放在 中,一般情况设置其CSS样式display:none来隐藏掉textarea,同样用id标识,如:

模板也可以直接存储在一个变量中

var tpl = " 模板内容 ";

2、调用引擎方式

(1)、数据结构是一个JavaScript对象,如:

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语法,如:

//函数体

};

if(1){}else{};

function testFun(){

return;

};

%>

假定事先设置数据为

var data={

title:'baiduTemplate',

list:['test1

}

注释

或 <%* 这是模板自带注释格式 *%>

<% //分隔符内支持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){%>

<%=list.length%>

<%}else{%>

list长度为0

<%}%>

循环语句

<%for(var i=0;i

<%=list[i]%>

<%}%>

4、不推荐使用功能

用户可以自定义分隔符,默认为 <% %>,如:

//设置左分隔符为

baidu.template.LEFT_DELIMITER='

//设置右分隔符为

baidu.template.RIGHT_DELIMITER='!>';

自定义默认输出变量是否自动HTML转义

//设置默认输出变量是否自动HTML转义,true自动转义,false不转义

baidu.template.ESCAPE = false;

D、性能相关数据

前端模板引擎在传统桌面电脑的浏览器端编译模板并渲染页面,无较大的性能开销。但在移动端上面,性能数据较为重要,故发布移动端性能数据列表,希望能够给各位开发者提供一个参考。

百度html模板引擎,BaiduTemplatetitle:

总结:编译执行时间(前端模版编译以及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