苏飞论坛

标题: BaiduTemplate 一个很赞的JS引擎 [打印本页]

作者: 站长苏飞 时间: 2017-3-30 16:52
标题: BaiduTemplate 一个很赞的JS引擎
baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎
http://baidufe.github.io/BaiduTemplate/

百度JS模板引擎 baiduTemplate 1.0.6 版

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

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

前端使用的模板系统或后端Javascript环境发布页面
2、功能概述：

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

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

B、使用举例

[HTML] 纯文本查看 复制代码

//直接复制即可使用，记得要下载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%></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文件，未压缩是考虑大家调错阅读等方便，上线前请自行压缩代码。

[HTML] 纯文本查看 复制代码

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

如果在nodejs环境中使用，可以通过npm包管理安装

//注意：名称全部小写
npm install baidutemplate
1、放置模板片段：

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

[HTML] 纯文本查看 复制代码

<script id='test1' type="text/template">

<!-- 模板部分 -->



<!-- 模板结束 -->   

</script>

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

[HTML] 纯文本查看 复制代码

<textarea id='test2' style='display:none;'>

<!-- 模板部分 -->



<!-- 模板结束 -->   

</textarea>

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

[HTML] 纯文本查看 复制代码

var tpl = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";

2、调用引擎方式

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

[HTML] 纯文本查看 复制代码

var data={

    title:'baiduTemplate',

    list:[

      'test data 1',

      'test data 2',

      'test data3'

    ]

}

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

[C#] 纯文本查看 复制代码

//可以付值给一个短名变量使用

var bt = baidu.template;

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

//方法一：直接传入data，返回编译后的HTML片段

[C#] 纯文本查看 复制代码

var html0 = baidu.template(tpl,data);

//或直接传入id即可

[C#] 纯文本查看 复制代码

var html0 = baidu.template('test1',data);

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

//方法二：先不传入data，返回编译后的函数

[C#] 纯文本查看 复制代码

var fun = baidu.template(tpl);

//或直接传入id即可

[C#] 纯文本查看 复制代码

var fun = baidu.template('test1');

//之后通过改变数据，调用缓存下来的函数，产生不同的HTML片段

[C#] 纯文本查看 复制代码

var html1 = fun(data1);

var html2 = fun(data2);

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

[C#] 纯文本查看 复制代码

document.getElementById('result0').innerHTML=html0;

document.getElementById('result1').innerHTML=html1;

document.getElementById('result2').innerHTML=html2;

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

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

[C#] 纯文本查看 复制代码

<% var test = function(){

    //函数体

};

if(1){}else{};

function testFun(){

    return;

};

%>

假定事先设置数据为

[C#] 纯文本查看 复制代码

var data={

    title:'baiduTemplate',

    list:['test1<script>','test2','test3']

}

注释

[C#] 纯文本查看 复制代码

<!-- 模板中可以用HTML注释 -->  或  <%* 这是模板自带注释格式 *%>



<% //分隔符内支持JS注释  %>

输出一个变量

//默认HTML转义，如果变量未定义输出为空

[C#] 纯文本查看 复制代码

<%=title%>

//不转义

[C#] 纯文本查看 复制代码

<%:=title%> 或 <%-title%>

//URL转义，UI变量使用在模板链接地址URL的参数中时需要转义

[C#] 纯文本查看 复制代码

<%:u=title%>

//UI变量使用在HTML页面标签onclick等事件函数参数中需要转义

[C#] 纯文本查看 复制代码

//“<”转成“<”、“>”转成“>”、“&”转成“&”、“'”转成“\'”

//“"”转成“\"”、“\”转成“\\”、“/”转成“\/”、\n转成“\n”、\r转成“\r”

<%:v=title%>

//HTML转义（默认自动）

[C#] 纯文本查看 复制代码

<%=title%> 或 <%:h=title%>

判断语句

[C#] 纯文本查看 复制代码

<%if(list.length){%>

    <h2><%=list.length%></h2>

<%}else{%>

    <h2>list长度为0<h2>

<%}%>

循环语句

<%for(var i=0;i<list.length;i++){%>
<li><%=list%></li>
<%}%>
4、不推荐使用功能

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

//设置左分隔符为 <!

[C#] 纯文本查看 复制代码

baidu.template.LEFT_DELIMITER='<!';

//设置右分隔符为 <!

[C#] 纯文本查看 复制代码

baidu.template.RIGHT_DELIMITER='!>';

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

//设置默认输出变量是否自动HTML转义，true自动转义，false不转义

[C#] 纯文本查看 复制代码

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 百度贴吧整理）

E、特别鸣谢
感谢各位业内的高手们对baiduTemplate的帮助！

感谢百度贴吧的大力支持，并且给出了移动端的测试数据，目前baiduTemplate使用在贴吧等百度移动端的产品上面，特别感谢这些产品的工程师们，也感谢各位业内使用者们！

感谢 @灰大、感谢 @王集鵠、感谢 @黄志龙、感谢 @严孙荣、感谢 @be

欢迎光临苏飞论坛 (http://www.sufeinet.com/)