1 介紹：
art-template 是一個簡約、超快的模板引擎。 它採用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，並且同時支持 NodeJS 和瀏覽器。
1.1 模板語法：
art-template 同時支持兩種模板語法。標準語法可以讓模板更容易讀寫；原始語法具有強大的邏輯處理能力。
標準語法
<code>{{if user}}{{user.name}}
{{/if}}/<code>原始語法
<code>/<code>
1.2 核心方法：
<code>// 基於模板名渲染模板template(filename, data);// 將模板源代碼編譯成函數template.compile(source, options);// 將模板源代碼編譯成函數並立即執行template.render(source, data, options);/<code>
2 安裝
2.1 安裝方法:
- 通過npm安裝: npm install art-template --save
- 下載安裝
2.2 在瀏覽器中編譯
因為瀏覽器不支持文件系統，所以 template(filename, data) 不支持傳入文件路徑，它內部使用 document.getElementById(filename).innerHTML 來獲取模板，例如：
<code> <title>Document/<title> {{if value}} ... {{/if}}{{if v1}} ... {{else if v2}} ... {{/if}}/<code>原始語法
<code>........./<code>
3.4 循環輸出
標準語法
<code>{{each target}} {{$index}} {{$value}}{{/each}}/<code>target是一個數組，each用於對數組遍歷，$index 是數組的下標， $value是數組的值 原始語法
<code> /<code>
注意:
- target 支持 array 與object 的迭代，其默認值為 $data。
具體看下面的例子：
<code> <title>Document/<title>each遍歷對象target(默認為$data).png
圖中可以看出$data其實就是傳入模板的總數據對象(原始數據對象)
- $value 與 $index 可以自定義：{{each target val key}}。
具體看下面例子：<code> <title>Document/<title>each遍歷數組和對象以及自定義$data和$index.png
3.5 定義變量
標準語法
<code>{{set temp = data.sub.content}}/<code>原始語法
<code>3.6 模板繼承
標準語法
<code>{{extend './layout.html'}}{{block 'head'}}...{{/block}}/<code>原始語法
<code>.../<code>模板繼承允許你構建一個包含站點共同元素的基本“模板骨架”,實例：
<code> <title>{{block 'title'}}My Site{{/block}}/<title> {{block 'head'}} <link> {{/block}} {{block 'content'}}{{/block}}/<code><code>{{extend './layout.art'}}{{block 'title'}}{{title}}{{/block}}{{block 'head'}} <link>{{/block}}{{block 'content'}}This is just an awesome page.
{{/block}}/<code>渲染 index.art 後，將自動應用佈局骨架。
3.7 子模板
標準語法
<code>{{include './header.art'}}{{include './header.art' data}}/<code>原始語法
<code>看如下例子：
<code> <title>art-template-filter/<title> date 默認為 format 過濾器(方法)的第一個參數， 'YYYy-mM-dd' 才是format 過濾器的第二個參數,date 經過 format 過濾器過濾後，得到的結果，又作為
addQuotationMarks 過濾器的默認參數，如果有更多的過濾器，那麼就把前一層過濾器過濾的結果，作為下一個過濾器的參數一層層過濾下去4 調試
template.defaults.debug art-template 內建調試器，能夠捕獲到語法與運行錯誤，並且支持自定義的語法。在 NodeJS 中調試模式會根據環境變量自動開啟：process.env.NODE_ENV !== 'production' 設置 template.defaults.debug=true 後，等同於：
<code>{ "cache": false, "minimize": false, "compileDebug": true}/<code>5 模板變量
template.defaults.imports 模板通過 $imports 可以訪問到模板外部的全局變量和導入的變量。
5.1 導入變量
<code>template.defaults.imports.log = console.log;/<code><code>看下面例子：
<code> <title>template.defaults.imports/<title><script> <% $imports.log('Hello, template.defaults.imports.log') %> <%= $imports.date %> /<script> /<code>注意：
這些語法必須寫在模板中，在模板中才會起作用；
5.2 內置變量清單
- $data 傳入模板的數據;
- $imports 外部導入的變量以及全局變量；
- print 字符串輸出函數;
- include 子模板載入函數
- extend 模板繼承模板導入函數
- block 模板塊生命函數
最後，小編想說：我是一名python開發工程師，
整理了一套最新的python系統學習教程，
想要這些資料的可以關注私信小編“01”即可（免費分享哦）希望能對你有所幫助
閱讀更多 Python智禪 的文章
