百度JS模板引擎
来源:互联网 发布:iconkit for mac 编辑:程序博客网 时间:2024/05/29 02:58
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<!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 baidutemplate
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>
模板也可以直接存储在一个变量中
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><%}%>
阅读全文
0 0
- 百度JS模板引擎
- 百度JS模板引擎 baiduTemplate
- 百度JS模板引擎 baiduTemplate
- 使用百度JS模板引擎生成PDF和Word文档
- “EasyTemplate” JS模板引擎
- 浅析js模板引擎
- TrimPath - Js模板引擎
- js模板引擎介绍
- JS模板引擎
- JS模板引擎 :ArtTemplate
- js模板引擎
- Handlebars.js 模板引擎
- 模板引擎 Handlebars.js
- js模板引擎
- 简易JS模板引擎
- JS模板引擎sychelTemplate
- js模板引擎
- doT.js 模板引擎
- 分析mtk_disp_mgr.c(引出一个典型的字符设备的创建过程)
- Python3-scipy
- 地理定位
- 【面向JS--数组】
- UVa 12657 Boxes in a Line解析代码
- 百度JS模板引擎
- react学习日志2
- 当图变成了一棵树(纠结的生成树)
- #define PINT int* typedef int *SINT
- opencv 数据类型及其位数总结
- Java接口的作用_动力节点Java学院整理
- 深入理解java虚拟机-第一章:java虚拟机内存结构
- asp.net页面的地址栏中显示自定义的ICO图标
- Android wifiManager的使用案例