• 百度JS模板引擎


    1. 应用场景

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

    2. 功能描述

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

    3. 特性

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

    4. 使用步骤

    1)在页面中引入js文件。

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

    2)定义模板片段

    页面中,模板块可以放在 <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 = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";

    3)准备模板数据,通常为json格式

    //单个变量
    var data = {username:"username"}
    //数组
    var data={testarr:['test data 1','test data 2','test data3']}
    //对象
    var data =
     {person:"id":4,"username":"king","password":"123456","age":19}}
    //list集合
    var data = {list: [{"id":1,"username":"king","password":"1","age":25},{"id":2,"username":"king","password":"11","age":19},{"id":3,"username":"king","password":"11","age":19},{"id":4,"username":"king","password":"123456","age":19}]}

    4)  数据传入模板,生成html片段

       方法一: 传入模板的同时,也传入数据

       如果模板片段是script或者在textarea中定义的,则使用id传入方法,

    // 'test1'表示模板片段中的id号, data表示准备的模板数据
    var data_html = baidu.template('test1',data);

     如果是像tpl一样保存在变量中时,格式类似,如下

    //tpl表示定义的模板变量
    var data_html = baidu.template(tpl, data)

     方法二:传入模板后,不传数据,可以当做一个函数使用,这样就分两步操作。

    //传入模板
    var fun1 = baidu.template('test1');
    var fun2 = baidu.template(tpl);
    
    //使用上面的函数
    var data_html = fun1(data)
    var data_html = fun2(data)

    上面两种方法中,方法二将模板封装为函数,可以多次调用。

    所以 如果是一个通用的模板建议使用方法二,否则使用方法一。具体根据实际情况来。

    如果觉得baidu.template比较长,也可以定义一个别名如 var bt = baidu.template;

    5) 使用生成的html片段

    //js中使用html片段填充下面的div
    document.getElementById('div_1').innerHTML=data_html;
    
    
    //定义空的div容器
    <div id ='div_1'></div>

    5. 如何书写模板

    在4.2中简单说明了定义模板的格式,下面具体说明如何定义模板,以下使用script为例子

    <%  %>表示分隔符,分隔符内语法为js语法:

    //输出单个变量
    <%=title%>
    
    //if判断
    <%if(list.length){%>
        <h2><%=list.length%></h2>
    <%}else{%>
        <h2>list长度为0<h2>
    <%}%>
    
    //for循环
    <%for(var i=0;i<list.length;i++){%>
         <li><%=list[i]%></li>
    <%}%>
    
    //关于转义,默认html转义,如果不转义,使用如下
    <%:=title%><%-title%>
    
    //另外有个全局转义变量控制
    //设置默认输出变量是否自动HTML转义,true自动转义,false不转义
    baidu.template.ESCAPE = false;

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

    到此结束,非常简单。上面这些都是摘自官网的说明。

    一般应用在轻量级的前端开发中,单纯使用js来开发的前端页面,如移动h5的开发,避免使用jquery等重量级的前端框架影响性能。

    baidu.template.js下载地址(不确定是不是官方出品的):http://baidufe.github.io/BaiduTemplate/

  • 相关阅读:
    js正則表達式语法
    购买DigtalOcean VPS 以及 连接Linux
    UVA 246
    牵一发动全身【Nhibernate基本映射】
    jquery.validate+jquery.form提交的三种方式
    [Python] 发送email的几种方式
    递归算法浅谈
    最小二乘法多项式曲线拟合原理与实现
    王立平-Android中对图像进行Base64编码
    [置顶] EasyMock的简单使用
  • 原文地址:https://www.cnblogs.com/30go/p/8418949.html
Copyright © 2020-2023  润新知