前端模板

在前端，模板和框架是兩個不一樣的概念，模板只是框架的一部分。框架比模板豐富多了。如Angular，react，vue是框架，mustache，jade，handlebars是模板。

前端模板百花齊放，百家爭鳴。不少模板根本沒有存在的必要。github上有人專門寫了一個「templateChooser」，爲人們選擇模板提供指南。

template-chooser

評價一個模板的好壞，速度根本不是問題，關鍵在於優雅簡潔好用。這麼多的模板根本學不完，挑幾個大衆點的、好用的便可。模板之間的優劣差距也不是太大，不要糾結於到底選哪一個。

前端模板分類標準不少：

• 按照是否須要預編譯：jade徹底不是html語言，須要編譯
• StringTemplate和DomTemplate：若是之渲染一遍，StringTemplate比較好，若是屬性變了，dom也要跟着變，則DomTemplate比較快。

1、mustache：logic-less

mustache是鬍子的意思，意指「{{}}」像嘴脣上面的鬍子同樣。
mustache是很是簡單的一個模板，它有各類語言的實現版本。不單單能夠用於html渲染，也能夠用於任何文本文件的模板渲染。
mustache js版

還有一個叫作hogan.js，徹底跟mustache是一回事，應該說mustache語法的一種js實現叫作hogan.js

2、handlebars：擴展了的mustache

handlebars是「八字鬍」，它兼容mustache，源於mustache。在mustache的基礎上，handlebars進行了一些靈活的擴展，使得此模板更好用。

3、twig

twig本來是PHP模板，有人把它改編成了js模板。

4、jade和pug

jade 英[dʒeɪd]
美[dʒed]

n. 玉，翡翠; 翡翠色; 劣馬，駑馬; [寶] 碧玉;
adj. 玉製的; 翡翠色的; 綠玉色的;

v. （使） 疲; （使） 疲憊不堪; （使） 精疲力盡;

jade是一個軟件商標的名字，jade模板庫的做者之前不知道，結果如今被迫更名了。由於商標緣故，jade更名爲pug，pug是哈巴狗的意思。
jade之於html，猶如yaml之於json。jade徹底是一門新的語言，它的編譯結果是html。我認爲這種方式一點都很差。
jade講解
Jade —— 源於 Node.js 的 HTML 模板引擎

5、EJS

EJS跟JSP長得太像了，只不過EJS用的是JS語言，JSP中用的是Java語言。
EJS是很是靈活的，卻不是一個logic-less模板。

6、dust（塵土）

此開源庫如今由領英在維護，領英是一個我的簡歷網站。
dust在語法上跟mustache、handlebars很像。

dust官方文檔

7、jsrender

jsrender跟jquery聯繫很是緊密，它是jquery的一個插件。
jsrender語法簡潔靈活，挺好用的，它充分發揮了js的優點。

官方給出了豐富的實例
http://borismoore.github.io/jsrender/demos/index.html

8、參考資料

一個對前端模板技術的全面總結