0、引入文件:
baiduTemplate使用仅需引入baiduTemplate.js文件,未压缩是考虑大家调错阅读等方便,上线前请自行压缩代码。
<script type="text/javascript" src="./baiduTemplate.js"></script>
如果在nodejs环境中使用,可以通过npm包管理安装
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命名空间
(3)、方法一:tpl是传入的模板(String类型),可以是模板的id,可以是一个模板片段字符串,传入模板和对应数据返回对应的HTML片段
方法二:或者可以只传入tpl,这时返回的是一个编译后的函数,可以把这个函数缓存下来,传入不同的data就可以生成不同的HTML片段
(4)、最后将他们插入到一个容器中即可
document.getElementById('result0').innerHTML=html0;
document.getElementById('result1').innerHTML=html1;
document.getElementById('result2').innerHTML=html2;
3、模板基本语法(默认分隔符为<% %>,也可以自定义)
分隔符内语句为js语法,如:
<% var test = function(){
假定事先设置数据为
var data={
title:'baiduTemplate',
list:['test1<script>','test2','test3']
}
注释
<!-- 模板中可以用HTML注释 --> 或 <%* 这是模板自带注释格式 *%>
<%
输出一个变量
判断语句
<%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、不推荐使用功能
用户可以自定义分隔符,默认为 <% %>,如:
自定义默认输出变量是否自动HTML转义
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 百度贴吧整理)