常用的JavaScript模板引擎介紹
最近工作內容慢慢接近我的理想化（web前端），所以關注比較多的是前端性能！后臺同事介紹使用ajax模板引擎，提高渲染速度！
下面介紹幾款 JavaScript 模板引擎
1. Mustache
基于javascript 實現的模板引擎,類似于 Microsoft's jQuery template plugin,但更簡單易用!
2. doT.js
doT.js 包含為瀏覽器和Node.js 準備的 JavaScript 模板引擎。
3. jSmart
jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。
4. dom.js
dom.js 是一款可用在客戶端和服務器端的 JavaScript 模板引擎
5. jade
Jade是受Haml的影響以JavaScript實現用于node的高性能模板引擎。
6. Hogan.js
來自 Twitter 的 JavaScript 模板引擎。
7. Handlebars
Handlebars 是一個 JavaScript 的頁面模板庫
8. artTemplate
artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。引擎支持調試。若渲染中遇到錯誤，調試器可精確定位到產生異常的模板語句，解決前端模板難以調試的問題。
獨有模板編譯工具，它能把前端模板編譯成不依賴模板引擎運行的JS文件，讓前端模板可以突破瀏覽器的限制，實現像后端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在 2kb(gzip) 中實現！
也許你會覺得這個插件名似曾相識，沒錯！這個也是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>
//模板邏輯語法開始與結束的界定符號為<% 與%>，若<%后面緊跟=號則輸出變量內容
</script>
渲染模板
var data = {
title: '標簽',
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;
相關文章
Javascript類型系統(tǒng)之String字符串類型詳解
這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關資料,需要的朋友可以參考下2016-06-06
json decode出現中文亂碼，返回null，很多朋友都遇到過吧，該怎么解決呢？下面小編把解決辦法分享在腳本之家網站上，供大家學習2015-10-10
微信小程序授權登錄實現方案wx.getUserProfile(2022年最新版)
微信在最近開始要求使用wx.getUserProfile()來獲取用戶的昵稱,頭像等信息,所以下面這篇文章主要給大家介紹了關于2022年最新版微信小程序授權登錄實現方案wx.getUserProfile的相關資料,需要的朋友可以參考下2022-11-11
JS實現模擬百度搜索“2012世界末日”網頁地震撕裂效果代碼
這篇文章主要介紹了JS實現模擬百度搜索“2012世界末日”網頁地震撕裂效果代碼,引入第三方插件實現頁面的抖動、撕裂及圖片等效果,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JavaScript日期類型的一些用法介紹,本文講解了獲取某個月份的天數、獲取時區(qū)、計算運行時間、刪除cookie等用法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了詳解微信小程序「渲染層網絡層錯誤」的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了JavaScript如何判斷對象有某屬性,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07![JavaScript 字符串與數組轉換函數[不用split與join]](http://img.jbzj.com/images/xgimg/bcimg7.png)
JavaScript 字符串與數組轉換函數[不用split與join]
下面的代碼，不考慮他的運行效率的話，思路不錯，大家可以看看，但在實際的應用中，我們仍然使用split或join來實現數組的操作。2009-12-12
今天小編就為大家分享一篇關于談談JavaScript中super(props)的重要性，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
flash調用js中的方法,讓js傳遞變量給flash的辦法及思路
前幾天發(fā)表了 將FlashVars寫在JS函數中，實現與后臺的實時變量更新，但是僅支持 IE，隨后與 Luckyer 進行了交流，發(fā)現用 SetVariable 可以很方便的實現多瀏覽器兼容。舉例如下。2013-08-08