zoukankan      html  css  js  c++  java
  • 百度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/

  • 相关阅读:
    pat 甲级 1065. A+B and C (64bit) (20)
    pat 甲级 1064. Complete Binary Search Tree (30)
    pat 甲级 1010. Radix (25)
    pat 甲级 1009. Product of Polynomials (25)
    pat 甲级 1056. Mice and Rice (25)
    pat 甲级 1078. Hashing (25)
    pat 甲级 1080. Graduate Admission (30)
    pat 甲级 团体天梯 L3-004. 肿瘤诊断
    pat 甲级 1099. Build A Binary Search Tree (30)
    Codeforce 672B. Different is Good
  • 原文地址:https://www.cnblogs.com/30go/p/8418949.html
Copyright © 2011-2022 走看看