高效能JavaScript模板引擎template.js原理解析
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 }} //{{}}{{ author }}{{each list as value i}}{{ i+1 }} : {{ value }}{{/each}}{{/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"></script>
巢狀的寫法
<script id="test" type="text/html"></script>
迴圈遍歷語句
{{each name}}
索引:{{$index}}
值:{{$value}}
{{/each}}
示例如下
<script id="test" type="text/html">{{if list.length >= 0}}{{each list as value index}}{{index+1}} -- 姓名:{{value.name}} -- 年齡:{{value.age}}</p>
{/each}
{{/if}}</script>
也可以簡寫為
<script id="test" type="text/html"></script>
呼叫自定義方法
輔助方法
使用template.helper(name, callback)註冊公用輔助方法,可以直接在{{}}中呼叫:
<script id="test" type="text/html"></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"></script>
<script type="text/html"></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原理解析
點選有驚喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript效能極限,在chrome下渲染效率測試中分別是知名引擎Mustache與micro tmpl的25/32倍(效能測試);artTemplate的模板還
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,簡單,好用。提供一套模板語法,使用者可以寫一個模板區塊,每次根據傳入的資料,生成對應資料產生的HTML片段,渲染不同的效果。https://github.com/aui/artTemplate 1.語法 (1)、使用
JavaScript模板引擎Template.js基本使用詳解
template.js是一款JavaScript模板引擎,提供一套模板語法,簡單好用,開發者可以寫一個模板區塊,每次傳入的資料,生成對應資料產生的HTML片段,渲染不同的效果。官網:簡潔語法版 https://github.com/aui/art-template/wiki/
JavaScript模板引擎Template.js使用詳解
template.js 一款 JavaScript 模板引擎,簡單,好用。提供一套模板語法,使用者可以寫一個模板區塊,每次根據傳入的資料,生成對應資料產生的HTML片段,渲染不同的效果。https://github.com/aui/artTemplate1、特性(1)、效能卓
高效能JavaScript模板引擎原理解析(artTemplate )
隨著 web 發展,前端應用變得越來越複雜,基於後端的 javascript(Node.js) 也開始嶄露頭角,此時 javascript 被寄予了更大的期望,與此同時 javascript MVC 思想也開始流行起來。javascript 模板引擎作為資料與介面分離工作中最重要一環,越來越
高效能JavaScript模板引擎原理解析
隨著 web 發展,前端應用變得越來越複雜,基於後端的 javascript(Node.js) 也開始嶄露頭角,此時 javascript 被寄予了更大的期望,與此同時 javascript MVC 思想也開始流行起來。javascript 模板引擎作為資料與介面分離工作
Javascript模板引擎mustache.js詳解
mustache.js是一個簡單強大的Javascript模板引擎,使用它可以簡化在js程式碼中的html編寫,壓縮後只有9KB,非常值得在專案中使用。本文總結它的使用方法和一些使用心得,內容不算很高深,純粹是入門內容,看看即可。不過要是你還沒有用過此類的javascript引
javascript模板引擎template.render使用
1 <script type="text/javascript"> 2 function test(){ 3 //你的方法 4 } 5 </script> 如上程式碼:通常我們見到的是以<script type="text/javascript"></sc
前端模板引擎artTemplate---高效能JavaScript模板引擎
關於artTemplate模板引擎的詳細原理請移步高效能JavaScript模板引擎原理解析,本文只探討如何使用。初學前端的人一般對於繫結資料都是使用原生js或者jquery來拼接字串,此為hardcode,而且拼接的過程很頭疼,什麼單引號雙引號,符號嵌入多了就
JavaScript 模板引擎實現原理解析
轉自這裡:http://www.cnblogs.com/huansky/p/6073104.html 感覺講的很好,可惜看的不是很懂…… 1、入門例項 首先我們來看一個簡單模板: <script type="template" id="template">
JavaScript模板引擎實現原理和封裝
這裡以art-template為例 先看例子 <!-- 引入模板引擎js檔案--> <script type="text/javascript" src="arttemplate.js"></script> <div id="content"&g
模板引擎template-native.js傳入的資料中包含HTML標籤,如何讓頁面直接識別標籤而不是顯示在標籤?
輸出的含有標籤如圖想要的結果是:解決方法:<%=#data.title[0]%>在資料data前加 # 就解決了。HTML <pre> 標籤pre 元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為
JavaScript模板引擎的應用場景及實現原理
一、應用場景 以下應用場景可以使用模板引擎: 1、如果你有動態ajax請求資料並需要封裝成檢視展現給使用者,想要提高自己的工作效率。 2、如果你是拼串族或者陣列push族,迫切的希望改變現有的書寫方式。 3、如果你在頁面佈局中,存在共性模組和佈局,你可以提取出公共模板,
JavaScript模板引擎原理與用法
htm 形式 nodename extern else def 正是 拓展 apply 這篇文章主要介紹了JavaScript模板引擎原理與用法,結合實例形式詳細分析了javascript模版引擎相關概念、原理、定義及使用方法,寫的十分的全面細致,具有一定的參考價值,對此有
vue系列---Mustache.js模板引擎介紹及原始碼解析(十)
mustache.js(3.0.0版本) 是一個javascript前端模板引擎。官方文件(https://github.com/janl/mustache.js) 根據官方介紹:Mustache可以被用於html檔案、配置檔案、原始碼等很多場景。它的執行得益於擴充套件一些標籤在模板檔案中,然後使用一個ha
JavaScript模板引擎例項應用
本文將舉例項向大家講解幾個常用模板引擎的簡單使用。 模板引擎示例演示地址 準備工作 演示資料:blog.json 結構: { "list": [ { "title": "這是title", "url": "htt
[譯] 只有 20 行的 JavaScript 模板引擎
寫於 2016.06.13 原文連結:JavaScript template engine in just 20 lines (譯者吐槽:只收藏不點贊都是耍流氓) 前言 我仍舊在為我的JS前處理器AbsurdJS進行開發工作。它原本是一個CSS前處理器,但之後它擴充套件成為了CSS
springboot專案中使用thymeleaf模板引擎引入js庫失效
js資原始檔所處位置: 在html檔案引用js庫 <script src="../static/scripts/jquery-1.7.2.min..js">
前端javaScript模板引擎之ArtTemplate
一、簡介 ArtTemplate是騰訊開發的一款使用方便、效能卓越javascript模板引擎,其渲染效率極其快。ArtTemplate的庫分為兩種,一個是template.js,這個是簡單的語法版本。另一個是template-native.js,是原生的語法版
讀《高效能 JavaScript》筆記 -”JS進階必讀“(第二章)
二,資料存取 2.0 javaScript四種基本的資料存取位置 字面量:字串,數字,布林值,物件,陣列,函式,正則表示式,及特殊的null和undefined值。