art-template 模板引擎的使用

簡介

art-template是一個簡約、執行速度超快的模板引擎。它採用作用域聲明的技術來優化模板渲染速度，從而獲得接近 Javascript 極限的運行性能，並且同時支持 NodeJs和瀏覽器。使用art-template 便於代碼的維護，以前我們渲染數據是以字符串模板的形式在 js 文件中寫入的 html 內容，如果 html內容需要修改，我們需要在 js 中修改。而用了模板引擎後，我們只需要在 html 文件中修改 html 內容。還有就是使用模板引擎操作DOM，效率也會更高一些。

art-template的特性：

• 擁有接近 Javascript 極限的運行性能；
• 調試友好：語法、運行時錯誤日誌精確到模板所在行，支持在模板文件上打斷點（Webpack Loader）；
• 支持 Express、Koa、Webpack；
• 支持模板繼承與子模板；
• 瀏覽器版本僅 6KB 大小；

安裝

可以在命令行中使用如下命令：
npm install art-template --save

也可以直接下載 js 文件，進入鏈接 Ctrl+s 保存文件至項目目錄中：template-web.js（gzip:6kb 這個源碼是壓縮過的）

語法

art-template 同時支持兩種模板語法。標準語法可以讓模板更容易讀寫；原始語法且有強大的邏輯處理能力。（例如在使用循環時，標準語法只能使用 each 循環遍歷，而原始語法還可以使用 for、while等循環）

標準語法支持基本模板語法以及基本 Javascript 表達式；原始語法支持任意 Javascript 語句，原始語法兼容 EJS、Underscore、LoDash模板。

標準語法：

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
//變量
{{set name="Lily"}}
//條件
{{if user==="aaa"}}
	<h2>{{user.name}}</h2>
{{else if user==="bbb"}}
	<h2>{{user.title}}</h2>
{{/if}}
//循環，$index和$value，可以自定義：{{each data val key}}
{{each data}}
    {{$index}} {{$value}}
{{/each}}

原始語法：

注意：<% %>與<%= %>的區別在於，<% %>裏面是 Js 語句，<%= %>裏面是表達式。

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
//變量
<%= var name="Lily" %>
//條件
<% if (user) { %>
	<h2><%= user.name %></h2>
<% } %>
//循環，data 支持 array 與 object 的迭代，其默認值爲 $data
<% for(var i = 0; i < data.length; i++){ %>
    <%= i %> <%= data[i] %>
<% } %>

核心方法

// 基於模板名渲染模板
template(filename, data);

// 將模板源代碼編譯成函數，返回一個渲染函數
template.compile(source, options);

// 將模板源代碼編譯成函數並立刻執行，返回渲染結果
template.render(source, data, options);

template.render(source, data, options)

• source，是 Html 模板字符串，我們可以使用 webpack 的 string-loader 插件將html文件內容轉成字符串。
• data，是要渲染的數據。
• options，是一個 template.defaults 中的配置對象。

var html = template.render('hi, {{value}}', {value: 'Max'});
console.log(html);//hi,Max

使用

我們在這裏使用 template.render( source,data )

使用下載 js 文件的方式，在html文件中引入 template-web.js。

<script src="./libs/template-web.js"></script>

設置 webpack.config 配置，將html文件轉成字符串：

loaders: [ { test: /.html$/, loader: “string” } ]

list.html 文件內容如下：

<ul>
	{{each datalist}}
	<li>$value['text']</li>
	{{/each}}
</ul>

list.js 文件內容如下：

//引入html文件
import ItemTpl from "./list.html";
//要渲染的數據
var data=[
	{text: 'option1'},
	{text: 'option2'}
]
//將data數據傳到list.html文件中
let html=template.render(ItemTpl,{datalist:data});
console.log(html);  //html: '<ul><li>option1</li><li>option2</li></ul>'