360SDN.COM

BaiduTemplate用法

来源:  2017-08-31 16:42:23    评论:0点击:

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 data 3'
    ]
}

(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;”、“'”转成“\&#39;”
//“"”转成“\&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 百度贴吧整理)


为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权