artTemplate-3.0

新一代 javascript 模板引擎javascript

特性

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

快速上手

編寫模板

使用一個type="text/html"的script標籤存放模板：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         < 
         script  
         id 
         = 
         "test"  
         type 
         = 
         "text/html" 
         > 
        
         < 
         h1 
         >{{title}}</ 
         h1 
         > 
        
         < 
         ul 
         > 
        
         {{each list as value i}} 
        
         < 
         li 
         >索引 {{i + 1}} ：{{value}}</ 
         li 
         > 
        
         {{/each}} 
        
         </ 
         ul 
         > 
        
         </ 
         script 
         >

渲染模板

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         var  
         data = { 
        
         title:  
         '標籤' 
         , 
        
         list: [ 
         '文藝' 
         ,  
         '博客' 
         ,  
         '攝影' 
         ,  
         '電影' 
         ,  
         '民謠' 
         ,  
         '旅行' 
         ,  
         '吉他' 
         ] 
        
         }; 
        
         var  
         html = template( 
         'test' 
         , data); 
        
         document.getElementById( 
         'content' 
         ).innerHTML = html;

演示

模板語法

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

簡潔語法

推薦使用，語法簡單實用，利於讀寫。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         {{ 
         if  
         admin}} 
        
         {{include  
         'admin_content' 
         }} 
        
         {{each list}} 
        
         <div>{{$index}}. {{$value.user}}</div> 
        
         {{/each}} 
        
         {{/ 
         if 
         }}

查看語法與演示

原生語法

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         <% 
         if  
         (admin){%> 
        
         <%include( 
         'admin_content' 
         )%> 
        
         <% 
         for  
         ( 
         var  
         i=0;i<list.length;i++) {%> 
        
         <div><%=i%>. <%=list[i].user%></div> 
        
         <%}%> 
        
         <%}%>

查看語法與演示

下載

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

方法

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 多餘空白字符

使用預編譯

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

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

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

2、模板支持引入子模板

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

基於預編譯：

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

預編譯工具：TmodJS

NodeJS

安裝

 
         1 
       
         npm install art-template

使用

 
         1 
       
         2 
       
         3 
       
         4 
       
         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

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         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:

 
         1 
       
         node demo/node-template-express.js

若使用 js 原生語法做爲模板語法，請改用 require('art-template/node/template-native.js')