我們從一段代碼說起，假設有一段這樣的 JSON 數據：

var json = {
	name: '流火',
	blog: 'ued.taobao.org'
};

我們需要根據這段 JSON 生成這樣的 HTML 代碼：

流火 (blog: ued.taobao.org)

傳統的 JavaScript 代碼一定是這個樣子：

var html;
html = '' + json.name + ' (blog: ' + json.blog + ')';

不言而喻，這樣的代碼混雜了 HTML 結構和代碼邏輯，而且代碼不具可讀性，不便于后期維護，于是便有了這樣一個函數：

function sub(str, data) {
 return str.replace(/{(.*?)}/igm, function($, $1) {
 return data[$1] ? data[$1] : $;
 });
}

有了這個函數，我們拼接字符串的工作就可以簡化為：

var tpl = '{name} (blog: {blog})';
var html = sub(tpl, json);

看到這里，不用我多說，我想通過這個例子直觀的展現出前端模板引擎的好處所在，這么做能夠完全剝離 HTML 和代碼邏輯，便于多人協作和后期的代碼維護。當然，當我們的業務邏輯需要對數據源進行循環遍歷，if 判斷等的時候，這個簡明的函數很顯然并不能滿足我們的需求，于是便有了如今這市面上眾多的模板引擎，諸如 Mustache，jQuery tmpl，Kissy template，ejs，doT，nTenjin 等等。

“如無必要，勿增實體。”

這是著名的奧卡姆剃須刀法則，簡單的說就是避免重復造輪子。那么就會有童鞋質疑，既然已然有這么多現成的東西可用，為什么還要重新打造一個呢？

我個人認為一個完善的模板引擎應該兼顧這幾點：

• 語法簡明
• 執行效率高
• 安全性
• 錯誤處理機制
• 多語言通用性

而市面上現有的模板引擎沒有做到兼顧以上幾點，比如 Mustache 支持多種語言，通用性不錯，不過性能稍差，而且語法不支持高級特性，例如遍歷的時候無法做 if 判斷，也無法獲得 index 索引值，jQuery tmpl 依賴 jQuery，缺乏可移植性，Kissy template 雖然依賴 Kissy， 不過性能和語法都值得推薦，doT/nTenjin 性能和靈活性都很不錯，但是語法需要用原生的js來寫，寫好的模板代碼可讀性稍差。

魚和熊掌不可兼得，語法的處理，安全性的輸出過濾和錯誤處理機制的引入在一定程度上都會或多或少降低模板引擎的性能，因此就需要我們權衡。Juicer 在實現上首先將性能看做第一個重要的指標，畢竟性能好壞直接影響用戶的感知，同時兼顧了安全性和錯誤處理機制（即便這樣會導致性能的略微下降）。

首先來看下 jsperf 上同幾個主流模板引擎的性能對比。

可以看到，性能上比傳統模板引擎均有提升，下邊的介紹主要從語法、安全性和錯誤處理，以及如何使用這幾個方面介紹下 Juicer.

語法

• 循環 {@each}…{@/each}
• 判斷 {@if}…{@else if}…{@else}…{@/if}
• 變量（支持函數）${varname|function}
• 注釋 {# comment here}

詳細的語法請參考 Juicer Docs.

安全性

安全性，簡單地說就是對輸出數據在輸出前進行一次轉義過濾，避免 XSS 這樣的腳本注入攻擊，簡單掃下盲，舉個 XSS 的例子。

var json = {
	output: 'alert("XSS");'
};

如果 JSON 數據是第三方接口返回或者含有用戶輸入（像 BBS、評價）的內容，我們如果赤裸裸的將 output 寫到頁面上就會執行惡意的js代碼，所以 Juicer 默認是對數據輸出做了安全轉義的，當然如果不想被轉義，可以使用 $${varname}。

juicer.to_html('${output}',json); 
//輸出：<script>alert("XSS");</script>
juicer.to_html('$${output}',json); 
//輸出：<script>alert("XSS");</script>

錯誤處理

如果沒有錯誤處理，當模板引擎編譯（Compile）或者渲染（Render）出錯時候就會引起后續js代碼停止執行，可想而知，如果因為一個逗號或者 JSON 數據的偶發錯誤導致整個頁面掛掉，是我們不能接受的。但是 Juicer 在遇到這些錯誤的時候不會影響后續代碼的執行，只會在控制臺打出一句警告（Warn）告知開發者模板解析出現錯誤。

juicer.to_html('${varname,,,,,,,}', json);
alert('hello, juicer!');

執行上邊的代碼就會看到控制臺打出的 Juicer Compile Exception: Unexpected token ,，但是不會因為錯誤導致后續的 alert被阻塞掉。

實現原理

Juicer 對一個模板的編譯和渲染的過程主要有以下幾個步驟：

• 對模板代碼進行語法分析
• 分析后生成原生的 JavaScript 代碼字符串
• 將生成的代碼轉為可重用的 Function（Compiled Template）

var json = {
 list: [
 { name: 'benben' },
 { name: 'liuhuo' }
 ]
};
juicer.set('errorhandling', false); // pre-set option
var tpl = '{@each list as value,key}$${value.name}{@/each}';
var compiled_tpl = juicer(tpl);

我們通過compiled_tpl.render.toString()看下編譯后的代碼：

function anonymous(data) {
 var data = data || {};
 var out = '';
 out += '';
 for (var i0 = 0, l = data.list.length; i0 < l; i0++) {
 var value = data.list[i0];
 var key = i0;
 out += '';
 out += ((value.name));
 out += '';
 }
 out += '';
 return out;
}

是不是已經明白了 Juicer 的原理？這個編譯后的函數就會每次幫我們完成從數據到 HTML 代碼的拼裝操作。

這里有幾點優化的地方值得分享下：

• using += instead of array.push
• avoid using with {}
• cache the compiled template (function)

這幾點優化在大數據量循環渲染時候性能提升顯著，不過正因為放棄了 with{} 語句，所以 Juicer 會在編譯函數之前對模板進行詞法分析，將用到的變量實現聲明，這樣就能避免 JSON 數據外層必須指定 data. 前綴，如果你覺得這點性能的提升不重要，也可以在 options 中指定 loose: false（禁用松散模式），這樣就可以不省去 data. 前綴，這樣做的好處就是性能會更好一些。

最后介紹下 Options 配置項，左側為參數默認值。

{
	cache: true/false,
	loose: true/false,
	strip: true/false,
	errorhandling: true/false
}

cache 默認為 true，即同一個模板編譯后是否被 Juicer 緩存，也就是說如果緩存開啟的情況下，同一個模板第一次編譯后，為了縮短耗時提升性能，后續不會再次執行編譯的操作而是直接從緩存中去取編譯好的模板函數。

Juicer 的 API

Juicer 有兩種使用方法，一種是通過

juicer(tpl, data);
// 或者
juicer.to_html(tpl, data);

直接根據提供的數據將模板轉為 HTML 代碼，另一種是通過 compile 方法先將模板編譯好，在需要的時候再對模板進行數據的 Render 操作：

var compiled_tpl=juicer(tpl);
compiled_tpl.render(data);
// 或者
var compiled_tpl=juicer.compile(tpl);
compiled_tpl.render(data);

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注 ｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信 我 回復“教程”

原文鏈接：

作者：admin

TML5發展如火如荼，隨著各大瀏覽器對 HTML5 技術支持的不斷完善以及HTML5 技術的不斷成熟，未來 HTML5 必將改變我們創建 Web 應用程序的方式。今天這篇文章向大家推薦8款優秀的HTML5開發工具，幫助你更高效的編寫 HTML5 應用。

1、Initializr

Initializr 是制作 HTML5 網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr 會為你生成代碼簡潔的可定制的網頁模板。

2、HTML5demos

想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運行簡單的 HTML5 聊天客戶端嗎？HTML5demos 會告訴你每一個HTML5特性在哪些瀏覽器中支持。

3、HTML5 Tracker

想了解 HTML5的最新動向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。

4、HTML5 visual cheat sheet

想要快速超找一個標簽或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。

5、Switch To HTML5

Switch To HTML5 是一個基礎而實用的模板生成工具。如果你開始一個新項目，可以到這里獲取免費的 HTML5 網站模板。

6、Cross browser HTML5 forms

HTML5 中的日歷，取色板，滑塊部件等都是非常棒工具，但是有些瀏覽器不支持。這個頁面將幫助你構建完美的HTML5表單兼容方案。

7、HTML5 Test

你瀏覽器準備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。

8、Lime JS

LimeJS 是一個 HTML5 游戲開發框架，用于快速構建運行于觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。

更多內容和資訊或者問題，更多干貨分享，盡在我的個人微信公眾號，

微信名：非著名程序員，微信號：smart_android（←長按復制）。

微博：澀郎

過前幾天的學習，對spring boot 已經有了基本的了解，如何創建項目，如何連接數據庫進行CRUD操作都能實現，今天學習如何使用spring boot支持的模板引擎渲染web頁面。

首先介紹一下在spring boot中如何訪問靜態資源，進行web開發，靜態資源是必不可少的。Spring Boot默認提供靜態資源目錄位置需置于classpath下，目錄名需符合如下規則：

• /static

• /public

• /resources

• /META-INF/resources

其實項目剛創建完成的時候，ide就自動在java/main/resources/目錄下給我們創建了一個static文件夾，在這個里面放我們常用的js、css、images就行

這樣建好文件夾之后，可以往images文件夾中放入一張圖片，啟動項目，測試一下是否能訪問，路徑是：http://localhost:8080/images/XXX.png。

下面就介紹一下在spring boot中如何使用模板引擎渲染web頁面

Spring Boot提供了默認配置的模板引擎主要有以下幾種：

• Thymeleaf

• FreeMarker

• Velocity

• Groovy

• Mustache

下面我將介紹一下如何使用這些模板引擎。

1.Thymeleaf：Thymeleaf是一個XML/XHTML/HTML5模板引擎，可用于Web與非Web環境中的應用開發。它是一個開源的Java庫，基于Apache License 2.0許可，由Daniel Fernández創建，該作者還是Java加密庫Jasypt的作者。Thymeleaf提供了一個用于整合Spring MVC的可選模塊，在應用開發中，你可以使用Thymeleaf來完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目標在于提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式，因此也可以用作靜態建模。你可以使用它創建經過驗證的XML與HTML模板。相對于編寫邏輯或代碼，開發者只需將標簽屬性添加到模板中即可。

在pom中加入依賴

新建一個html頁面

在controller中傳參以及跳轉

啟動項目，訪問這個頁面

2.FreeMarker:即一種基于模板和要改變的數據，并用來生成輸出文本（HTML網頁、電子郵件、配置文件、源代碼等）的通用工具。它不是面向最終用戶的，而是一個Java類庫，是一款程序員可以嵌入他們所開發產品的組件。FreeMarker是免費的，基于Apache許可證2.0版本發布。其模板編寫為FreeMarker Template Language（FTL），屬于簡單、專用的語言。需要準備數據在真實編程語言中來顯示，比如數據庫查詢和業務運算，之后模板顯示已經準備好的數據。在模板中，主要用于如何展現數據，而在模板之外注意于要展示什么數據。

和Thymeleaf模板使用方法類似，首先引入依賴

新建一個頁面：indexfree.ftl

controller

訪問

3.Velocity：Velocity是一個基于java的模板引擎（template engine）。它允許任何人僅僅使用簡單的模板語言（template language）來引用由java代碼定義的對象。當Velocity應用于web開發時，界面設計人員可以和java程序開發人員同步開發一個遵循MVC架構的web站點，也就是說，頁面設計人員可以只關注頁面的顯示效果，而由java程序開發人員關注業務邏輯編碼。Velocity將java代碼從web頁面中分離出來，這樣為web站點的長期維護提供了便利，同時也為我們在JSP和PHP之外又提供了一種可選的方案。

首先還是引入依賴

新建indexv.vm

controller

然后訪問，這時候如何你用的是1.5及以上的spring boot版本，可能會出現問題

簡單查了一下原因，網上說springboot1.5和以上版本 已經完全拋棄了velocity視圖模板，所以會出現這個問題，作為測試，我將版本降到了1.4.7，啟動之后訪問正常，如果有需要1.5版本及以上版本使用這個模板，需要另外尋找解決辦法，在此就不做說明。

以上簡單介紹了一下前三個模板引擎，Groovy和Mustache資料較少，目前還不會使用，有這方面資料的朋友希望可以分享學習一下。