Baidu Template

时间 2019-12-18

标签 template 繁體版

原文原文链接

百度JS模板引擎 baiduTemplate 1.0.6 版

A、baiduTemplate 简介

0、baiduTemplate但愿创造一个用户以为“简单好用”的JS模板引擎

注：等不及能够直接点左侧导航中的”C、使用举例“，demo即刻试用。

一、应用场景：

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

二、功能概述：

提供一套模板语法，用户能够写一个模板区块，每次根据传入的数据，
生成对应数据产生的HTML片断，渲染不一样的效果。

三、特性：

一、语法简单，学习成本极低，开发效率提高很大，性价比较高（使用Javascript原生语法）；
二、默认HTML转义（防XSS***），而且支持包括URL转义等多种转义；
三、变量未定义自动输出为空，防止页面错乱；
四、功能强大，如分隔符可自定等多种功能；

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

一、放置模板片断：

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

二、调用引擎方式

（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;

三、模板基本语法（默认分隔符为<% %>，也能够自定义）

分隔符内语句为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;”、“\”转成“\\”、“/”转成“\/”、\n转成“\n”、\r转成“\r”<%: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><%}%>

四、不推荐使用功能

用户能够自定义分隔符，默认为 <% %>，如：

//设置左分隔符为 <!baidu.template.LEFT_DELIMITER='<!';//设置右分隔符为 <!  baidu.template.RIGHT_DELIMITER='!>';

自定义默认输出变量是否自动HTML转义

//设置默认输出变量是否自动HTML转义，true自动转义，false不转义baidu.template.ESCAPE = false;

原文连接：http://baidufe.github.io/BaiduTemplate/javascript

1. C++ Template（zz） C++ Template
2. Template
3. template
4. Angular template ng-template/container/content
5. C++ 模板template和template
6. org.thymeleaf.exceptions.TemplateInputException: Error resolving template [index.html], template mig
7. Consul Template
8. Template-Layui：Layui
9. Underscore template
10. Template Method
更多相关文章...
• XSLT 元素 - XSLT 教程
• XSLT 元素 - XSLT 教程
• Docker容器实战(八) - 漫谈 Kubernetes 的本质