常用的JavaScript模板引擎介紹

這篇文章主要介紹了常用的JavaScript模板引擎介紹,本文介紹了8款常用JavaScript 模板引擎,著重講解了artTemplate模板引擎,需要的朋友可以參考下    

最近工作內容慢慢接近我的理想化（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;