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 的本質

相關標籤/搜索

template+nginx+docker

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。