點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

javascript模板引擎artTemplate

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:25:19

javascript模板引擎artTemplate

javascript模板引擎artTemplate:artTemplate新一代 javascript 模板引擎=================artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript模板引擎artTemplate:artTemplate新一代 javascript 模板引擎=================artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25

artTemplate

新一代 javascript 模板引擎

=================

artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍（性能測試）。

引擎支持調試。若渲染中遇到錯誤，調試器可精確定位到產(chǎn)生異常的模板語句，解決前端模板難以調試的問題（詳情）。

另外，artTemplate 的模板還支持使用自動化工具預編譯，這一切都在 2KB(Gzip) 中實現(xiàn)！

快速上手

編寫模板

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

<script id="test" type="text/html">
 <h1><%=title%></h1>
 <ul> <%for(i = 0; i < list.length; i ++) {%>
 <li>條目內容 <%=i + 1%> ：<%=list[i]%></li>
 <%}%>
 </ul></script>

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

渲染模板

template.render(id, data)

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

演示

嵌入子模板

<%include(id, [data])%>語句可以嵌入子模板，其中第二個參數(shù)是可選的，它默認傳入當前的數(shù)據(jù)。

<script id="test" type="text/html">
 <h1><%=title%></h1>
 <%include('list')%></script>
 <script id="list" type="text/html">
 <ul> <%for(i = 0; i < list.length; i ++) {%>
 <li>條目內容 <%=i + 1%> ：<%=list[i]%></li>
 <%}%>
 </ul></script>

演示

不轉義HTML

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

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

若需要關閉默認轉義，可以設置template.isEscape = false。
演示

在js中存放模板

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

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.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 字符進行轉義。
演示

設置界定符

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

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

演示

自定義語法

artTemplate 提供一個語法擴展用來簡化模板邏輯語法。語法示例：

{{if admin}} <h3>{{title}}</h3>
 <ul>
 {{each list}} <li>{{$index + 1}}: {{$value}}</li>
 {{/each}} </ul>{{/if}}

安裝：把 extensions/template-syntax.js 合并到 template.js 底部。
更多語法說明

自動化工具

預編譯工具

使用它可以讓前端模版不再受瀏覽器的限制，支持如后端模版一樣按文件放置、include 語句等特性，可以像后端一樣書寫前端模板！

編譯后的模板不再依賴前端模板引擎與后端，模板可以通過 SeaJS 或 RequireJS 等加載器進行異步加載，亦能利用它們成熟的打包合并工具進行上線前的優(yōu)化，如合并與壓縮。

項目主頁：<https://github.com/aui/tmodjs>

抽取工具

./tools/combine.html

可以把 HTML 中的模板提取出來以便把模板嵌入到 js 文件中。

與編譯工具不同的是，抽取后的模板仍然依賴引擎運行。

模板編碼規(guī)范

1、不能使用 javascript 關鍵字作為模板變量(包括 ECMA5 嚴格模式下新增的關鍵字):

> break, case, catch, continue, debugger, default, delete, do, else, false, finally, for, 
function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with, 
abstract, boolean, byte, char, class, const, double, enum, export, extends, final, float, goto, implements, import, int, 
interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile, arguments, let, yield

2、模板運行在沙箱中，內部無法訪問外部變量，除非給模板定義輔助方法。例如：