1. 程式人生 > >art-template入門(六)之解析規則

art-template入門(六)之解析規則

解析規則

template.defaults.rules

art-template 可以自定義模板解析規則,預設配置了原始語法與標準語法。

修改界定符

// 原始語法的界定符規則
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/;
// 標準語法的界定符規則
template.defaults.rules[1].test = /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/;

它們是一個正則表示式,你可以只修改界定符部分。例如修改 <%

 %> 為 <? ?>

var rule = template.defaults.rules[0];
rule.test = new RegExp(rule.test.source.replace('<%', '<\\\?').replace('%>', '\\\?>'));

新增語法

從一個簡單的例子說起,讓模板引擎支援 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 不輸出任何內容

值得一提的是,語法規則對渲染速度沒有影響,模板引擎編譯器會幫你優化渲染效能。