參見GitHub:https://github.com/yanhaijing/template.js/
template.js簡介:
template.js 一款javascript模板引擎,簡單,好用。
template.js遵循簡單好用的原則,所有接口都設計簡單,職責單一。
功能概述
提供一套模板語法,用戶可以寫一個模板區塊,每次根據傳入的數據,生成對應數據產生的HTML片段,渲染不同的效果。
# 特性
- 模版編譯,渲染
- 支持所有主流瀏覽器及Node(UMD)
- JavaScript原生語法
- 豐富的自定義配置
- 支持數據過濾
- 異常捕獲功能
- 功能專一,簡單好用
# 兼容性
- Node 0.10+
- Safari 6+ (Mac)
- iOS 5+ Safari
- Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
- Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
- Internet Explorer 6+ (Windows, Windows Phone)
- Opera 10+ (Windows, linux, Android)
快速上手
# 編寫模版
使用一個type="text/html"的script標簽存放模板,或者放到字符串中:
<script id="tpl" type="text/html">
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
</script>
# 渲染模板
var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});
輸出結果:
<ul>
<li>yan</li>
<li>haijing</li>
</ul>
更多例子,請見[demo](demo)目錄。
===============================================================================
模版語法
可在html代碼中使用javascript代碼。
# 表達式
開始標簽和結束標簽(如:<% 與 %>)包裹起來的語句則為模板的邏輯表達式。如下:
<%var a = 3%>
<%while(a--) { console.log(a); }%>
上面的輸出如下:
> 2
> 1
> 0
# 輸出表達式
默認輸出(是否轉碼由escape參數決定):
<%=content%>
不編碼輸出:
<%:=content%>
對輸出內容進行HTML轉義:
<%:h=content%>
對輸出內容進行URL編碼:
<%:u=content%>
**注:編碼可以防止數據中含有 HTML 字符串,避免引起 XSS 攻擊。**
# 注釋
可使用js注釋,如下:
<%/* 這里是注釋 */%>
## template
唯一入口函數,支持編譯和渲染,在傳統瀏覽器環境會占用template全局變量。
template函數會返回渲染數據的字符串,若缺省數據會返回編譯后的函數,可多次調用,傳入不同數據,返回不同結果,適用於多次渲染同一模版的情況,提高性能。
- tpl {string} 必須 帶編譯的模版字符串
- [data] {object} 可選 要渲染的數據
- return {function|string} 若缺省data返回函數,否則返回字符串
[演示](../demo/basic.html)
## template.config
配置template.js的自定義選項。
- option {Object} 配置的對象參數
- return {Object} 配置對象的鏡像
### 可配置參數
- sTag {String} 開始標簽 默認為 '<%'
- eTag {String} 結束標簽 默認為 '%>'
- compress {Boolean} 是否壓縮輸出的html 默認為false
- escape {Boolean} 默認是否對輸出內容進行html轉義 默認為true
[演示](../demo/config.html)
## template.registerFunction
注冊自定義函數功能。
- name {String} 自定義函數的名字,如果缺省會返回全部已注冊的函數
- fn {Function} 自定義函數,如果缺省會返回名稱為name的函數
- return {Object|Function} 對象或函數
## template.unregisterFunction
取消自定義函數功能。
- name {String} 取消自定義函數的名字
- return {Boolean} 是否成功
[演示](../demo/registerFunction.html)
## template.registerModifier
注冊自定義修復器功能。
- name {String} 自定義修復器的名字,如果缺省會返回全部已注冊的修復器
- fn {Function} 自定義修復器,如果缺省會返回名稱為name的修復器
- return {Object|Function} 對象或函數
## template.unregisterModifier
取消自定義修復器功能。
- name {String} 取消自定義修飾器的名字
- return {Boolean} 是否成功
[演示](../demo/registerModifier.html)
## template.noConflict+
在以原始方式使用template.js時會存在改函數(在模塊化開發環境中不會存在),用來釋放template.js占用的全局變量template。同時會返回template。
- return {Function} template