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

  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/libaoli/p/5066213.html
Copyright © 2011-2022 走看看