性能卓越的js模板引擎--artTemplate

時間 2019-11-12

原文原文鏈接

之前研究過一段時間的handlebars，但由於其渲染性能略遜於騰訊的artTemplate（在artTemplate的GitHub官網上有推薦的性能測試地址），貌似最近耳邊聽到得最多的模板引擎也就是artTemplate了，因此就花個時間來研究下吧...javascript

artTemplate是新一代的javascript模板引擎，若採用擁有V8引擎的chrome瀏覽器進行測試，其渲染性能甚至能達到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上，測試截圖以下：html

下面進入正題：前端

特性java

性能卓越，執行速度一般是 Mustache 與 tmpl 的 20 多倍
支持運行時調試，可精肯定位異常模板所在語句
對 NodeJS Express 友好支持
安全，默認對輸出進行轉義、在沙箱中運行編譯後的代碼（Node版本能夠安全執行用戶上傳的模板）
支持include語句
可在瀏覽器端實現按路徑加載模板
支持預編譯，可將模板轉換成爲很是精簡的 js 文件
模板語句簡潔，無需前綴引用數據，有簡潔版本與原生語法版本可選
支持全部流行的瀏覽器

快速上手node

編寫模板(採用script標籤並帶有屬性id和type="text/html")git

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

渲染模板github

1 var data = {
2     author: '宮崎駿',
3     isAdmin: true,
4     list: ['千與千尋', '哈爾的移動城堡', '幽靈公主', '風之谷', '龍貓']
5 };
6 var html = template('test', data);
7 document.getElementById('content').innerHTML = html;

模板語法chrome

有兩個版本的模板語法能夠選擇。express

1.簡潔語法(採用"{{ }}"，推薦使用)npm

<script id="test" type="text/html">
{{if admin}}
  {{include 'admin_content'}}

  {{each list}}
     <div>{{$index}}.{{$value.user}}</div>
  {{/each}}
{{/if}}
</script>

2.原生語法(採用"<%= %>")

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

下載地址

template.js (簡潔語法版, 2.7kb)
template-native.js (原生語法版, 2.3kb)

方法

1. template(id, data)

根據 id 渲染模板。內部會根據document.getElementById(id)查找模板，若是沒有 data 參數，那麼將返回一渲染函數。

 1 //修改代碼前
 2 var data = {
 3     author: '宮崎駿',
 4     isAdmin: true,
 5     list: ['千與千尋', '哈爾的移動城堡', '幽靈公主', '風之谷', '龍貓']
 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: ['千與千尋', '哈爾的移動城堡', '幽靈公主', '風之谷', '龍貓']
15    };
16 var html = template('test');
17 console.log(html);

控制檯輸出結果以下圖：

2. template.compile(source, options)

將返回一個渲染函數。

 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: ['千與千尋', '哈爾的移動城堡', '幽靈公主', '風之谷', '龍貓']
12    });
13    document.getElementById('content').innerHTML = html;
14   </script>

3. template.render(source, options)

將返回一個渲染結果。

4. template.helper(name, callback)

將返回一個渲染結果。

 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(), //小時
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)

更改引擎的默認配置。

字段	類型	默認值	說明
openTag	String	`'{{'`	邏輯語法開始標籤
closeTag	String	`"}}"`	邏輯語法結束標籤
escape	Boolean	`true`	是否編碼輸出 HTML 字符
cache	Boolean	`true`	是否開啓緩存（依賴 options 的 filename 字段）
compress	Boolean	`false`	是否壓縮 HTML 多餘空白字符

使用預編譯

可突破瀏覽器限制，讓前端模板擁有後端模板同樣的同步「文件」加載能力：

1、按文件與目錄組織模板

template('tpl/home/main', data)

2、模板支持引入子模板

{{include '../public/header'}}

基於預編譯

可將模板轉換成爲很是精簡的 js 文件（不依賴引擎）
使用同步模板加載接口
支持多種 js 模塊輸出：AMD、CMD、CommonJS
支持做爲 GruntJS 插件構建
前端模板可共享給 NodeJS 執行
自動壓縮打包模板

預編譯工具：TmodJS

NodeJS

安裝

npm install art-template

使用

var template = require('art-template');
var data = {list: ["aui", "test"]};

var html = template(__dirname + '/index/main', data);

配置

NodeJS 版本新增了以下默認配置：

字段	類型	默認值	說明
base	String	`''`	指定模板目錄
extname	String	`'.html'`	指定模板後綴名
encoding	String	`'utf-8'`	指定模板編碼

配置base指定模板目錄能夠縮短模板的路徑，而且可以避免include語句越級訪問任意路徑引起安全隱患，例如：

template.config('base', __dirname);
var html = template('index/main', data)

NodeJS + Express

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');

運行 demo: