閱讀目錄
以前研究過(guò)一段時(shí)間的handlebars，但因?yàn)槠滗秩拘阅苈赃d于騰訊的artTemplate（在artTemplate的GitHub官網(wǎng)上有推薦的性能測(cè)試地址），貌似最近耳邊聽(tīng)到得最多的模板引擎也就是artTemplate了，所以就花個(gè)時(shí)間來(lái)研究下吧...
artTemplate是新一代的javascript模板引擎，若采用擁有V8引擎的chrome瀏覽器進(jìn)行測(cè)試，其渲染性能甚至能達(dá)到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上，測(cè)試截圖如下：
下面進(jìn)入正題：
特性
include語(yǔ)句
快速上手
編寫模板(采用script標(biāo)簽并帶有屬性id和type="text/html")
<script id="test" type="text/html"> {{if isAdmin}} <h1>{{author}}</h1> <ul> {{each list as value i}} <li>{{i+1}}:{{value}}</li> {{/each}} </ul> {{/if}} </script>渲染模板
1 var data = {2 author: '宮崎駿',3 isAdmin: true,4 list: ['千與千尋', '哈爾的移動(dòng)城堡', '幽靈公主', '風(fēng)之谷', '龍貓']5 };6 var html = template('test', data);7 document.getElementById('content').innerHTML = html;
模板語(yǔ)法
有兩個(gè)版本的模板語(yǔ)法可以選擇。
1.簡(jiǎn)潔語(yǔ)法(采用"{{ }}"，推薦使用)
<script id="test" type="text/html">{{if admin}} {{include 'admin_content'}} {{each list}} <div>{{$index}}.{{$value.user}}</div> {{/each}}{{/if}}</script>2.原生語(yǔ)法(采用"<%= %>")
<script id="test" type="text/html"><%if {%> <%include('admin_content')%> <%for (var i=0;i<list.length;i++) {%> <div><%=i%>.<%=list[i].user%></div> <%}%><%}%></script>
下載地址
方法
1. template(id, data)
根據(jù) id 渲染模板。內(nèi)部會(huì)根據(jù)document.getElementById(id)查找模板，如果沒(méi)有 data 參數(shù)，那么將返回一渲染函數(shù)。
1 //修改代碼前 2 var data = { 3 author: '宮崎駿', 4 isAdmin: true, 5 list: ['千與千尋', '哈爾的移動(dòng)城堡', '幽靈公主', '風(fēng)之谷', '龍貓'] 6 }; 7 var html = template('test', data); 8 document.getElementById('content').innerHTML = html; 9 10 //修改代碼后11 var data = {12 author: '宮崎駿',13 isAdmin: true,14 list: ['千與千尋', '哈爾的移動(dòng)城堡', '幽靈公主', '風(fēng)之谷', '龍貓']15 };16 var html = template('test');17 console.log(html);控制臺(tái)輸出結(jié)果如下圖：
2. template.compile(source, options)
將返回一個(gè)渲染函數(shù)。
1 <h1>用變量存放模板</h1> 2 <div id="content"></div> 3 <script> 4 var source = '<ul>' + 5 '{{each list as value i}}' + 6 '<li>{{i+1}}.{{value}}</li>' + 7 '{{/each}}' + 8 '</ul>'; 9 var render = template.compile(source);10 var html = render({11 list: ['千與千尋', '哈爾的移動(dòng)城堡', '幽靈公主', '風(fēng)之谷', '龍貓']12 });13 document.getElementById('content').innerHTML = html;14 </script>
3. template.render(source, options)
將返回一個(gè)渲染結(jié)果。
4. template.helper(name, callback)
將返回一個(gè)渲染結(jié)果。
1 <script id="test" type="text/html"> 2 {{time | dateFormat: 'yyyy年 MM月 dd日 hh:mm:ss'}} 3 </script> 4 <script> 5 template.helper('dateFormat', function(date, format) { 6 var date = new Date(date); 7 var map = { 8 M: date.getMonth() + 1, //月份 9 d: date.getDate(), //日10 h: date.getHours(), //小時(shí)11 m: date.getMinutes(), //分12 s: date.getSeconds(), //秒13 q: Math.floor((date.getMonth() + 3) / 3), //季度14 S: date.getMilliseconds() //毫秒15 };16 var format = format.replace(/([yMdhmsqS])+/g, function(all, t) {17 var v = map[t];18 if (v !== undefined) {19 if (all.length > 1) {20 v = '0' + v;21 v = v.substr(v.length - 2);22 }23 return v;24 } else if (t === 'y') {25 return (date.getFullYear() + '').substr(4 - all.length);26 }27 return all;28 });29 return format;30 });31 // ---------32 var data = {33 time: new Date().toString()34 };35 var html = template('test', data);36 document.getElementById('content').innerHTML = html;37 </script>
5. template.config(name, value)
更改引擎的默認(rèn)配置。
| 字段 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| openTag | String | '{{' | 邏輯語(yǔ)法開(kāi)始標(biāo)簽 |
| closeTag | String | "}}" | 邏輯語(yǔ)法結(jié)束標(biāo)簽 |
| escape | Boolean | true | 是否編碼輸出 HTML 字符 |
| cache | Boolean | true | 是否開(kāi)啟緩存（依賴 options 的 filename 字段） |
| compress | Boolean | false | 是否壓縮 HTML 多余空白字符 |
使用預(yù)編譯
可突破瀏覽器限制，讓前端模板擁有后端模板一樣的同步“文件”加載能力：
一、按文件與目錄組織模板
template('tpl/home/main', data)
二、模板支持引入子模板
{{include '../public/header'}}
基于預(yù)編譯
預(yù)編譯工具：TmodJS
NodeJS
安裝
npm install art-template
使用
var template = require('art-template');var data = {list: ["aui", "test"]};var html = template(__dirname + '/index/main', data);
配置
NodeJS 版本新增了如下默認(rèn)配置：
| 字段 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| base | String | '' | 指定模板目錄 |
| extname | String | '.html' | 指定模板后綴名 |
| encoding | String | 'utf-8' | 指定模板編碼 |
配置base指定模板目錄可以縮短模板的路徑，并且能夠避免include語(yǔ)句越級(jí)訪問(wèn)任意路徑引發(fā)安全隱患，例如：
template.config('base', __dirname);var html = template('index/main', data)
var template = require('art-template');template.config('base', '');template.config('extname', '.html');app.engine('.html', template.__express);app.set('view engine', 'html');//app.set('views', __dirname + '/views');
運(yùn)行 demo:
node demo/node-template-express.js
聯(lián)系客服
