http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 7126|回复: 1

[JavaScript] BaiduTemplate 一个很赞的JS引擎

[复制链接]
发表于 2017-3-30 16:52:41 | 显示全部楼层 |阅读模式
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


1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 17:55

© 2014-2021

快速回复 返回顶部 返回列表