zoukankan      html  css  js  c++  java
  • 百度JS模板引擎 baiduTemplate 1.0.6 版

    A、baiduTemplate 简介

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

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

    1、应用场景:

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

    http://tangram.baidu.com/BaiduTemplate

    2、功能概述:

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

    3、特性:

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

    B、使用举例

    //直接复制即可使用,记得要下载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[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);
    
    //渲染
    document.getElementById('result').innerHTML=html;
    </script>
    
    </body>
    </html>
    

    C、基本用法

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

    E、特别鸣谢

    感谢各位业内的高手们对baiduTemplate的帮助!

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

    感谢 @灰大、感谢 @王集鵠、感谢 @黄志龙、感谢 @严孙荣、感谢 @berg、感谢 @黄方荣、感谢 @rayi-、感谢 @东杰、感谢 @杨尊程、感谢 @冯威风、感谢 @糖饼、感谢 @风之石 、感谢 @貘大等等,感谢各位在使用的开发者们!

    F、change log

    1.0.6版本

    重构代码,修正自定义变量加分号语法错误的bug,增加对版本号的标注 baidu.template.versions

    1.0.5版本

    修改可能造成内存泄露的变量及方法直接挂在baidu.template命名空间下

    1.0.4版本

    经过第三方测试反馈,进行对编译后产生的函数性能优化,性能提高1/3以上

    1.0.3版本

    通过产品线反馈,经过讨论增加自定义是否默认转义接口 baidu.template.ESCAPE

    1.0.2版本

    优化正则,提升性能,修复bug,支持nodejs,支持npm install baidutemplate可以安装

    1.0.1版本

    优化正则,提升性能,修复bug

  • 相关阅读:
    结对编程(阶段二)
    结对编程 第一阶段
    Git实验
    webpack02
    webpack01
    实验五 单元测试
    实验四 代码审评
    UML建模工具的安装和使用
    实验二 结对编程(阶段二)
    博客园背景的修改
  • 原文地址:https://www.cnblogs.com/libaoli/p/5066213.html
Copyright © 2011-2022 走看看