简单易用的baidutemplate模板的使用

按照官网（http://baidufe.github.io/BaiduTemplate/）的说法，baidutemplate介绍如下：

A、baiduTemplate 简介

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

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

1、应用场景：

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

2、功能概述：

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

3、特性：

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

那如何使用呢？下面我们通过官网上一个例子来看看：

<!Doctype html>
<html>
<head><meta charset="utf-8"/><title>test</title><!-- 引入baiduTemplate -->
    <script type="text/javascript" src="../libs/baiduTemplate/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);//var html = baidu.template('t:_1234-abcd-1',data);
    //渲染
    document.getElementById('result').innerHTML=html;
</script></body>
</html>

看到效果之后，我们在看看代码就很容易理解：

0、引入文件：

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

<script type="text/javascript" src="./baiduTemplate.js"></script>

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等事件函数参数中需要转义
//“<”转成“&lt;”、“>”转成“&gt;”、“&”转成“&amp;”、“'”转成“\'”
//“"”转成“\&quot;”、“\”转成“\\”、“/”转成“\/”、\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 百度贴吧整理）

总的来说，这个模板在实际项目中比较好用，给前端开发带来了很大的便利性，不用自己造轮子就可以使用，推荐使用。

简单易用的baidutemplate模板的使用相关推荐

这个简单易上手的后台模板，新手程序员务必收藏好！
大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标! 今天小编推荐一款后台模板 ...
简单易用的公司网页模板，助您快速建站
在当今数字化时代,拥有一个高质量的公司网页是每个企业成功的关键.然而,对于那些没有技术专业知识的人来说,创建一个专业的网页可能是一项艰巨的任务.但是,现在有许多简单易用的公司网页模板可用于帮助您快速建 ...
易企秀更换模板里的音乐_易企秀黄金：探索中国 SaaS 企业走向成功的路径
天气炎热的午后,远离了水泥墙壁和反光玻璃,在一间视角开阔且满视野幽深僻静的会议室里,易企秀创始人兼 CEO 黄金为这次媒体交流会打开了话匣子-- 01 征"名"夺"利&q ...
简单绘图软件实现mfc大作业_生产流程图怎么做？简单易上手的流程图工具
生产流程图是什么呢?首先,生产流程指的是在生产的过程中,劳动者通过利用一定的生产设备或工具,将各种原材料.半成品投入,按照一定顺序进行加工,最终得到成品产出的整个过程.而生产流程图则是使用图表符号的形 ...
学习C++项目——一个基于C++11简单易用的轻量级网络编程框架 1
一个基于C++11简单易用的轻量级网络编程框架一.项目下载.导入.编译和运行现在准备深入学习 C++ ,先肝一个项目,这个项目是<一个基于C++11简单易用的轻量级网络编程框架>, ...
简单易用的OKR工具——源目标OKR
有效**推行OKR**需要一些必备的前提,比如:平等包容的企业环境.高层的理解和支持.简单易用的OKR目标管理工具. 最近几年,OKR真的火了! 前有谷歌布道,后有无数大佬站台,2014年,OKR传入 ...
实用的3款视频添加水印软件分享，简单易上手
如今刷短视频已经成为许多小伙伴饭后闲暇之余消遣的项目,也有不少人因此加入了创作短视频的队列.但是在分享前,最好是对自己的作品加上水印.为什么呢?第一是可以起到更好的宣传作用,第二是防止他人盗窃作品内容 ...
focusky怎么制作html5,一款简单易上手的3D动态PPT制作软件Focusky
原标题:一款简单易上手的3D动态PPT制作软件Focusky Focusky动画演示大师是一款傻瓜式的动画宣传片.微课.3D 动态 PPT 制作工具.通过缩放动作,让演示文档变成生动有趣的动画,制作 ...
如何选择一个简单易用的云桌面
如何选择一个简单易用的企业级桌面云系统废话少说,服务器虚拟化相信大家都熟悉了,也没啥难度了:但是桌面虚拟化就没那们简单.给你看一个Horizon View的系统架构,复杂不?反正一个新手,不折腾个把 ...

简单易用的baidutemplate模板的使用

A、baiduTemplate 简介

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

1、应用场景：

2、功能概述：

3、特性：

0、引入文件：

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

1、放置模板片段：

页面中，模板块可以放在 <script> 中，设置type属性为text/template或text/html，用id标识，如：

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

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

2、调用引擎方式

（1）、数据结构是一个JSON，如：

（2）、baiduTemplate占用baidu.template命名空间

（3）、方法一：tpl是传入的模板(String类型)，可以是模板的id，可以是一个模板片段字符串，传入模板和对应数据返回对应的HTML片段

方法二：或者可以只传入tpl，这时返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的HTML片段

（4）、最后将他们插入到一个容器中即可

3、模板基本语法（默认分隔符为<% %>，也可以自定义）

分隔符内语句为js语法，如：

假定事先设置数据为

注释

输出一个变量

判断语句

循环语句

4、不推荐使用功能

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

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

D、性能相关数据

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

简单易用的baidutemplate模板的使用相关推荐

最新文章

热门文章