高效能JavaScript模板引擎template.js原理解析

阿新 • • 發佈：2019-01-17

artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript效能極限,在chrome下渲染效率測試中分別是知名引擎Mustache與micro tmpl的25/32倍(效能測試);artTemplate的模板還支援使用自動化工具預編譯;

artTemplate的庫分為兩種,一個是template.js(採用"{{ }}"),一個是template-native.js(採用"<%= %>");第一個是簡潔語法版,第二個是原生語法(感覺像JSP)版,兩個庫的語法不可混用,否則會報錯;本文主要是講簡潔語法

template.js是一款使用方便/效能卓越javascript模板引擎,簡單/好用,支援webpack和fis,只有5K左右大小

原理

提前將Html程式碼放進一個<script id="test" type="text/html"></script>中,當需要用到時,在js裡這樣呼叫:var htmlstr = template("test",放Json資料或其他),然後$("#*").html(htmlstr),放進去就好

功能概述

提供一套模板語法,使用者可以寫一個模板區塊,每次根據傳入的資料,生成對應資料產生的HTML片段,渲染不同的效果

特性

1.效能卓越,執行速度通常是Mustache與tmpl的20多倍(效能測試)

2.支援執行時除錯,可精確定位異常模板所在語句(演示)

3.對NodeJS Express友好支援

4.安全,預設對輸出進行轉義,在沙箱中執行編譯後的程式碼(Node版本可以安全執行使用者上傳的模板)

5.支援include語句,可匯入定義的其它模組

6.可在瀏覽器端實現按路徑載入模板(詳情)

7.支援預編譯,可將模板轉換成為非常精簡的js檔案

8.模板語句簡潔,無需字首引用資料,有簡潔版本與原生語法版本可選

9.支援所有流行的瀏覽器

10.豐富的自定義配置

11.支援資料過濾

12.異常捕獲功能

具體方法

引入template.js檔案

引用簡潔語法的引擎版本,例如:<script src="template.js"></script>

編寫模板

使用一個type="text/html"的script標籤存放模板,或者放到字串中:

<script id="test" type="text/html">{{ if ifAdmin }}  //{{}}符號包裹起來的語句為模板的邏輯表示式
    <h1>{{ author }}</h1>
    <ul>
      {{each list as value i}}
        <li>{{ i+1 }} : {{ value }}</li>
      {{/each}}
    </ul>
  {{/if}}</script>

注意:{{}}這是都是對內容編碼輸出,寫成{{#author}}是對內容不編碼輸出;編碼可以防止資料中含有HTML字串,避免引起XSS攻擊

渲染模板(向模板插入資料並輸出到頁面)

var data = { 
  author:'宮崎駿',
  isAdmin:true,
  list:['千與千尋','哈爾的移動城堡','幽靈公主','風之谷','龍貓']
};
var html = template('test',data); //template(id,data):根據id渲染模板,內部會根據document.getElementById(id)查詢模板,如果沒有data引數那麼將返回一渲染函式
document.getElementById('content').innerHTML = html;

輸出結果

<h1>宮崎駿</h1>
<ul>
  <li>1 : 千與千尋</li>  
  <li>2 : 哈爾的移動城堡</li> 
  <li>3 : 幽靈公主</li>  
  <li>4 : 風之谷</li> 
  <li>5 : 龍貓</li> 
</ul>

語法

表示式

流程控制語句(if else)

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

示例如下

<script id="test" type="text/html">
  <div>
    {{if bok == 22}}
      <h1>線上</h1>
    {{else if bok == 33}}
      <h2>隱藏</h2>
    {{else}}
      <h3>走這裡</h3>
    {{/if}}
  </div>
</script>

巢狀的寫法

<script id="test" type="text/html">
  <div>
    {{if bok}}{{if list.length >= 0}}
        <p>線上</p>
      {{else}}
        <p>沒有資料</p>
      {{/if}}{{/if}}
  </div>
</script>

迴圈遍歷語句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

示例如下

<script id="test" type="text/html">
  <div>
    {{if list.length >= 0}}{{each list as value index}}
        <p>編號：{{index+1}} -- 姓名：{{value.name}} -- 年齡：{{value.age}}</p>
      {/each}
    {{/if}}
  </div>
</script>

也可以簡寫為

<script id="test" type="text/html">
  <div>
    {{if list.length >= 0}}{{each list}}
        <p>編號：{{$index+1}} -- 姓名：{{$value.name}} -- 年齡：{{$value.age}}</p>
      {/each}
    {{/if}}
  </div>
</script>

呼叫自定義方法

輔助方法

使用template.helper(name, callback)註冊公用輔助方法,可以直接在{{}}中呼叫:

<script id="test" type="text/html">  
  <div>
    {{if c == 100}}
      <ul>
        {{each person}}
          <li>姓名：{{$value.name}} -- 性別：{{show($value.sex)}}</li>
        {{/each}}
      </ul>
    {{/if}}
  </div>
</script>
<script>
  var data = {
    c:100,
    person:[
      {name:"jack",age:18,sex:1},
      {name:"tom",age:19,sex:0},
      {name:"jerry",age:20,sex:0},
      {name:"kid",age:21,sex:1},
      {name:"jade",age:22,sex:0}
    ]
  };
  //自定義函式
  template.helper('show',function(sex){
    console.log(sex); //同樣可以列印日誌到控制檯
    if(sex == 0){
      return "男"
    }else if(sex == 1){
      return "女"
    }
  });
  var html = template('test',data);
  document.getElementById('app').innerHTML = html;
</script>

輔助方法,可以擴充套件常用的公共方法

template.helper('dateFormat', function (date, format) { 
 // .. 
 return value; 
});

在模板中的使用方式：

語法 : {{ data | funname : '第二引數' }};

具體呼叫為 : funname(data,'第二引數');

模板中使用的方式:{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支援傳入引數與巢狀使用:{{time | say:'cd' | ubb | link}}

注意:引擎不會對輔助方法輸出的HTML字元進行轉義

呼叫子模版

{{include 'main'}}引入子模板,資料預設為共享;{{include 'main' a}},a為制定資料,但是同樣必須是父級資料,可以看看下面的例子,如果不注入的a的話,引入的子模板是接受不到資料的

<body>
  <div id="app"></div>
  <script id="main" type="text/html">  
    <ul>
      {{each list}}
        <li>{{$value}}</li>
      {{/each}}
    </ul>  
    {{include 'main' a}} <!-- include--匯入其它模版,很實用的一個功能 -->
  </script>
  <script type="text/html">
    <div>
      <ul>
      {{each person}}
        <li>{{$value.name}}</li>
      {{/each}}
      </ul>
      {{include 'main' a}}
    </div>
  </script>
  <script>
    var data = {
      person:[
        {name:"jack",age:18},
        {name:"tom",age:19},
        {name:"jerry",age:20},
        {name:"kid",age:21},
        {name:"jade",age:22}
      ],
      a:{
        list:['文藝','部落格','攝影','電影','民謠','旅行','吉他']
      }
    };
    var html = template('test',data);
    document.getElementById('app').innerHTML = html;
  </script>
</body>

點選有驚喜

高效能JavaScript模板引擎template.js原理解析

原理

功能概述

特性

具體方法

引入template.js檔案

編寫模板

渲染模板(向模板插入資料並輸出到頁面)

輸出結果

語法

表示式

流程控制語句(if else)

巢狀的寫法

迴圈遍歷語句

呼叫自定義方法

輔助方法

呼叫子模版

高效能JavaScript模板引擎template.js原理解析

JavaScript模板引擎Template.js

JavaScript模板引擎Template.js基本使用詳解

JavaScript模板引擎Template.js使用詳解

高效能JavaScript模板引擎原理解析（artTemplate ）

高效能JavaScript模板引擎原理解析

Javascript模板引擎mustache.js詳解

javascript模板引擎template.render使用

前端模板引擎artTemplate---高效能JavaScript模板引擎

JavaScript 模板引擎實現原理解析

JavaScript模板引擎實現原理和封裝

模板引擎template-native.js傳入的資料中包含HTML標籤，如何讓頁面直接識別標籤而不是顯示在標籤？

JavaScript模板引擎的應用場景及實現原理

JavaScript模板引擎原理與用法

vue系列---Mustache.js模板引擎介紹及原始碼解析(十)

JavaScript模板引擎例項應用

[譯] 只有 20 行的 JavaScript 模板引擎

springboot專案中使用thymeleaf模板引擎引入js庫失效

前端javaScript模板引擎之ArtTemplate

讀《高效能 JavaScript》筆記－”JS進階必讀“(第二章)

高效能JavaScript模板引擎template.js原理解析

原理

功能概述

特性

具體方法

引入template.js檔案

編寫模板

渲染模板(向模板插入資料並輸出到頁面)

輸出結果

語法

表示式

流程控制語句(if else)

巢狀的寫法

迴圈遍歷語句

呼叫自定義方法

輔助方法

呼叫子模版

相關推薦