常用的JavaScript模板引擎介紹
最近工作內(nèi)容慢慢接近我的理想化(web前端),所以關(guān)注比較多的是前端性能!后臺同事介紹使用ajax模板引擎,提高渲染速度!
下面介紹幾款 JavaScript 模板引擎
1. Mustache
基于javascript 實現(xiàn)的模板引擎,類似于 Microsoft's jQuery template plugin,但更簡單易用!
2. doT.js
doT.js 包含為瀏覽器和Node.js 準備的 JavaScript 模板引擎。
3. jSmart
jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。
4. dom.js
dom.js 是一款可用在客戶端和服務(wù)器端的 JavaScript 模板引擎
5. jade
Jade是受Haml的影響以JavaScript實現(xiàn)用于node的高性能模板引擎。
6. Hogan.js
來自 Twitter 的 JavaScript 模板引擎。
7. Handlebars
Handlebars 是一個 JavaScript 的頁面模板庫
8. artTemplate
artTemplate 是新一代 javascript 模板引擎,它在 v8 中的渲染效率可接近 javascript 性能極限,在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。引擎支持調(diào)試。若渲染中遇到錯誤,調(diào)試器可精確定位到產(chǎn)生異常的模板語句,解決前端模板難以調(diào)試的問題。
獨有模板編譯工具,它能把前端模板編譯成不依賴模板引擎運行的JS文件,讓前端模板可以突破瀏覽器的限制,實現(xiàn)像后端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在 2kb(gzip) 中實現(xiàn)!
也許你會覺得這個插件名似曾相識,沒錯!這個也是artDialog的作者糖餅
博客地址:http://www.planeart.cn/
引用引擎
<script src="js/template.js"></script>
編寫模板
<script id="test" type="text/html">
//使用一個type="text/html"的script標簽存放模板:
<h1><%=title%></h1>
<ul>
<%
for(i=0;i<list.length;i++){%>
<li>itemL <%=i+1%>:<%=list[i]%></li>
<%}%>
</ul>
//模板邏輯語法開始與結(jié)束的界定符號為<% 與%>,若<%后面緊跟=號則輸出變量內(nèi)容
</script>
渲染模板
var data = {
title: '標簽',
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;
相關(guān)文章
javaScript 關(guān)閉瀏覽器 (不彈出提示框)
如果網(wǎng)頁不是通過腳本程序打開的(window.open()),調(diào)用window.close()腳本關(guān)閉窗口前,必須先將window.opener對象置為null,否則瀏覽器(IE7、IE8)會彈出一個確定關(guān)閉的對話框。2010-01-01用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)
用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)...2007-08-08scroll事件實現(xiàn)監(jiān)控滾動條并分頁顯示(zepto.js)
這篇文章主要為大家詳細介紹了scroll事件實現(xiàn)監(jiān)控滾動條并分頁顯示示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12