baiduTemplate 百度 JS 模板引擎,最简单好用的 JS 模板引擎,JS 语法学习无成本,调用也只是一个函数。
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
testtitle:
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)、数据结构是一个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语法,如:
//函数体
};
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、性能相关数据
前端模板引擎在传统桌面电脑的浏览器端编译模板并渲染页面,无较大的性能开销。但在移动端上面,性能数据较为重要,故发布移动端性能数据列表,希望能够给各位开发者提供一个参考。
总结:编译执行时间(前端模版编译以及json被转换为html字符串的时间)范围约在10~90毫秒,大部分集中在20~60毫秒之间。Dom渲染时间(html字符串通过dom.innerHTML被插入到div里的时间)范围约在40~160毫秒,大部分集中在50~130毫秒之间。