簡單介紹

javascript 模板引擎作為數據與界面分離工作中最重要一環，越來越受開發者關注。

artTemplate 是新一代 javascript 模板引擎，它采用預編譯方式讓性能有了質的飛躍，并且充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現。

javascript 模板引擎基本原理

雖然每個引擎從模板語法、語法解析、變量賦值、字符串拼接的實現方式各有所不同，但關鍵的渲染原理仍然是動態執行 javascript 字符串。

可看：http://cdc.tencent.com/?p=5723 基本原理的例子

artTemplate 高效的秘密

1、預編譯
在一般的模板引擎實現原理中，因為要對模板變量進行賦值，所以每次渲染都需要動態編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程卻是在渲染之前完成的，這種方式稱之為“預編譯”。

2、更快的字符串相加方式
很多人誤以為數組 push 方法拼接字符串會比 += 快，要知道這僅僅是 IE6-8 的瀏覽器下。實測表明現代瀏覽器使用 += 會比數組 push 方法快，而在 v8 引擎中，使用 += 方式比數組拼接快 4.7 倍。所以 artTemplate 根據 javascript 引擎特性采用了兩種不同的字符串拼接方式。

使用方法

1、引用js文件：<script src="js/arttmpl.js"></script>
2、頁面中，使用一個type="text/template"的script標簽存放模板：

<script id='doctor-template' type="text/template"><% for(var i in data){ var item=data[i]; %><li class="mui-table-view-cell mui-media "><a href="javascript:;" class="mui-navigate-right"><div class="mui-media-object mui-pull-left"><img src="<%=(item.photo)%>" width="100%"><span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span> </div><div class="mui-media-body"><%=(item.name)%>&nbsp;<span class="mui-badge mui-badge-warning"><%=(item.position)%></span><p class="mui-ellipsis"><%=(item.hospital)%></p><p class="mui-ellipsis"><%=(item.desc)%></p></div></a></li><% } %></script>

模板邏輯語法開始與結束的界定符號為<% 與 %>，若<%后面緊跟=號則輸出變量內容。

3、渲染模板

template.render(id, data);

繼續上面的例子：

var fragment = template('doctor-template', {"data":[{name:"王靜",score:4.5,photo:'images/logo.png',hospital:"江蘇省中醫院",desc:'婦科、不孕不育癥、月經病等',position:'副醫師'},{name:"啦啦",score:4.9,photo:'images/logo.png',hospital:"鼓樓醫院",desc:'兒童呼吸系統疾病的診治，對于兒童疾病',position:'主治醫師'}]});

不轉義HTML

模板引擎默認數據包含的 HTML 字符進行轉義以避免 XSS 漏洞，若不需要轉義的地方可使用==。

<script id="test" type="text/template"> <%==value%> </script>

若需要關閉默認轉義，可以設置：

template.config('escape', false);

在js中存放模板

var source ='<ul>'+ '<% for (var i = 0; i < list.length; i ++) { %>'+ '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'+'<% } %>'+'</ul>'; var data = {list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'] }; var render = template.compile(source); var html = render(data); document.getElementById('content').innerHTML = html;

template.compile([id], source)將返回一個渲染函數。其中 id 參數是可選的，如果使用了 id 參數，可以使用template.render(id, data)渲染模板。

添加輔助方法

template.helper(name, callback)輔助方法一般用來進行字符串替換，如 UBB 替換、臟話替換等。

例如擴展一個UBB替換方法：

template.helper('$ubb2html', function (content) {return content.replace(/[b]([^[]?)[/b]/igm, '<b>$1</b>').replace(/[i]([^[]?)[/i]/igm, '<i>$1</i>').replace(/[u]([^[]?)[/u]/igm, '<u>$1</u>').replace(/[url=([^]])]([^[]?)[/url]/igm, '<a href="$1">$2</a>').replace(/[img]([^[]?)[/img]/igm, '<img src="$1" />'); });

在模板中的使用方式：

<%=$ubb2html(content) %>

注意：引擎不會對輔助方法輸出的 HTML 字符進行轉義。

設置界定符

若前端模板語法與后端語法產生沖突，可以修改模板引擎界定符，例如：

template.openTag = "<!--["; template.closeTag = "]-->";

GitHub 地址

更多參考文檔：http://aui.github.io/artTemplate/

總結

以上是生活随笔為你收集整理的js模板引擎——art Template的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。