標籤:預設值 cape func 操作 format dex block 預設 date
一、模板文法1、變數使用與輸出
<% if (user) { %> <h2><%= user.name %></h2><% } %>或:{{if user}} <h2>{{user.name}}</h2>{{/if}}
art-template 同時支援 {{expression}}
簡約文法與任意 JavaScript 運算式 <% expression %>
。
2、原始輸出
{{@value}}或<%- value %>
原始輸出語句不會對 HTML
內容進行轉義
3、條件
{{if value}} ... {{/if}}{{if v1}} ... {{else if v2}} ... {{/if}}或<% if (value) { %> ... <% } %><% if (value) { %> ... <% } else { %> ... <% } %>
4、迴圈
{{each target}} {{$index}} {{$value}}{{/each}}或<% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %><% } %>
target
支援 Array
與 Object
的迭代,其預設值為 $data
$value
與 $index
可以自訂:{{each target val key}}
5、變數
{{set temp = data.sub.content}}或<% var temp = data.sub.content; %>
6、模板繼承
{{extend ‘./layout.art‘}}{{block ‘head‘}} ... {{/block}}或<% extend(‘./layout.art‘) %><% block(‘head‘, function(){ %> ... <% }) %>
模板繼承允許你構建一個包含你網站共同元素的基本模板“骨架”。
7、子模板
{{include ‘./header.art‘}}{{include ‘./header.art‘ data}}或<% include(‘./header.art‘) %><% include(‘./header.art‘, data) %>
include
第二個參數預設值為 $data
。
8、列印輸出
<% print(val, val2, val3) %>
9、過濾器
// 向模板中匯入全域變數template.defaults.imports.$dateFormat = function(date, format){/*[code..]*/};template.defaults.imports.$timestamp = function(value){return value * 1000};
因為 imports
定義的全域變數的優先順序會比普通模板變數高,所以建議命名使用 $
首碼。
{{date | $timestamp | $dateFormat ‘yyyy-MM-dd hh:mm:ss‘}}或<%= $dateFormat($timestamp(date), ‘yyyy-MM-dd hh:mm:ss‘) %>
{{value | filter}}
過濾器文法類似管道操作符,它的上一個輸出作為下一個輸入。
10、壓縮html、js、css
template.defaults.minimize = true;
art-template 的頁面壓縮功能是在編譯階段實現的,因此完全不影響渲染速度,並且能夠加快網路傳輸速度。但也有一個限制,它不能正常處理未閉合的 HTML 標籤,因此使用 include
語句載入模板片段的時候請小心。
請避免書寫這樣的模板:
<body>或:</body></html>
使用 模板繼承 代替 include
可以避免這樣的問題出現。
11、調試
設定 template.defaults.debug=true
後,它會設定如下選項:
{ "bail": false, "cache": false, "minimize": false, "compileDebug": true}
debug
預設配置:
- Node 環境 =
process.env.NODE_ENV !== ‘production‘
- 瀏覽器環境 =
false
12、全域變數
1)內建變數清單
$data
傳入模板的資料 {Object|array}
$imports
外部匯入的所有變數,等同 template.defaults.imports
{Object}
print
字串輸出函數 {function}
include
子模板載入函數 {function}
extend
模板繼承模板匯入函數 {function}
block
模板塊聲明函數 {function}
2)注入全域變數
template.defaults.imports.$console = console;<% $console.log(‘hello world‘) %>
模板外部所有的變數都需要使用 template.defaults.imports
注入、並且要在模板編譯之前進行聲明才能使用。
13、配製文法規則
1)修改界定符
art-template 支援修改預設範本界定符 {{}}
與 <%%>
:
// 原生文法的界定符規則template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)([\w\W]*?)(-?)%>/;// art 文法的界定符規則template.defaults.rules[1].test = /{{\s*([@#]?)(\/?)([\w\W]*?)\s*}}/;
2)添加文法
從一個簡單的例子說起,讓模板引擎支援 ES6 ${name}
模板字串的解析:
template.defaults.rules.push({ test: /\${([\w\W]*?)}/, use: function(match, code) { return { code: code, output: ‘escape‘ } }});
其中 test
是匹配字串正則,use
是匹配後的調用函數。關於 use
函數:
- 參數:一個參數為匹配到的字串,其餘的參數依次接收
test
正則的分組匹配內容
- 傳回值:必須返回一個對象,包含
code
與 output
兩個欄位:
code
轉換後的 JavaScript 語句
output
描述 code
的類型,可選值:
‘escape‘
編碼後進行輸出
‘raw‘
輸出原始內容
false
不輸出任何內容
值得一提的是,文法規則對渲染速度沒有影響,模板引擎編譯器會幫你最佳化渲染效能。
js-template-art【二】文法