js-template-art【二】文法

來源:互聯網
上載者:User

標籤:預設值   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] %><% } %>
  1. target 支援 Array 與 Object 的迭代,其預設值為 $data
  2. $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【二】文法

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.