artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓性能有了質的飛躍，並且充分利用 javascript 引擎特性，使得其性能無論在前端還是後端都有極其出色的表現。
除了性能優勢外，調試功能也值得一提。模板調試器可以精確定位到引發渲染錯誤的模板語句，解決了編寫模板過程中無法調試的痛苦，讓開發變得高效，也避免了因為單個模板出錯導致整個套用崩潰的情況發生。
基本介紹
- 中文名：艾特模版
- 外文名：artTemplate.js
模板特性,快速上手,編寫模板,渲染模板,模板語法,簡潔語法,原生語法,方法示例,使用預編譯,升級參考,
模板特性
- 性能卓越，執行速度通常是 Mustache 與 tmpl 的 20 多倍
- 支持運行時調試，可精確定位異常模板所在語句
- 對 NodeJS Express 友好支持
- 安全，默認對輸出進行轉義、在沙箱中運行編譯後的代碼
- 支持include語句
- 可在瀏覽器端實現按路徑載入模板
- 支持預編譯，可將模板轉換成為非常精簡的 js 檔案
- 模板語句簡潔，無需前綴引用數據，有簡潔版本與原生語法版本可選
- 支持所有流行的瀏覽器
快速上手
編寫模板
使用一個type="text/html"的script標籤存放模板：
<script id="test" type="text/html"><h1>{{title}}</h1><ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}}</ul></script>
渲染模板
var data = { title: '標籤', list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他']};var html = template('test', data);document.getElementById('content').innerHTML = html;
模板語法
有兩個版本的模板語法可以選擇。
簡潔語法
推薦使用，語法簡單實用，利於讀寫。
{{if admin}} {{include 'admin_content'}} {{each list}} <div>{{$index}}. {{$value.user}}</div> {{/each}}{{/if}}
原生語法
<%if (admin){%> <%include('admin_content')%> <%for (var i=0;i<list.length;i++) {%> <div><%=i%>. <%=list[i].user%></div> <%}%><%}%>
方法示例
template(id, data)
根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。
如果沒有 data 參數，那么將返回一渲染函式。
template.compile(source, options)
將返回一個渲染函式。
template.render(source, options)
將返回渲染結果。
template.helper(name, callback)
添加輔助方法。
例如時間格式器：
template.config(name, value)
更改引擎的默認配置。
| 欄位 | 類型 | 默認值 | 說明 |
|---|---|---|---|
openTag | String | '{{' | 邏輯語法開始標籤 |
closeTag | String | "}}" | 邏輯語法結束標籤 |
escape | Boolean | true | 是否編碼輸出 HTML 字元 |
cache | Boolean | true | 是否開啟快取（依賴 options 的 filename 欄位） |
compress | Boolean | false | 是否壓縮 HTML 多餘空白字元 |
使用預編譯
可突破瀏覽器限制，讓前端模板擁有後端模板一樣的同步“檔案”載入能力：
一、按檔案與目錄組織模板
template('tpl/home/main', data)
二、模板支持引入子模板
{{include '../public/header'}}
基於預編譯
- 可將模板轉換成為非常精簡的 js 檔案（不依賴引擎）
- 使用同步模板載入接口
- 支持多種 js 模組輸出：AMD、CMD、CommonJS
- 支持作為 GruntJS 外掛程式構建
- 前端模板可共享給 NodeJS 執行
- 自動壓縮打包模板
升級參考
為了適配 NodeJS express，artTemplate v3.0.0 接口有調整。
接口變更
- 默認使用簡潔語法
- template.render()方法的第一個參數不再是 id，而是模板字元串
- 使用新的配置接口template.config()並且欄位名有修改
- template.compile()方法不支持 id 參數
- helper 方法不再強制原文輸出，是否編碼取決於模板語句
- template.helpers中的$string、$escape、$each已遷移到template.utils中
- template()方法不支持傳入模板直接編譯
