常用的JavaScript模板引擎介紹

更新時(shí)間：2015年02月28日 10:19:58 投稿：junjie

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

最近工作內(nèi)容慢慢接近我的理想化（web前端），所以關(guān)注比較多的是前端性能！后臺(tái)同事介紹使用ajax模板引擎，提高渲染速度！

下面介紹幾款 JavaScript 模板引擎

1. Mustache

基于javascript 實(shí)現(xiàn)的模板引擎,類似于 Microsoft's jQuery template plugin,但更簡(jiǎn)單易用!

2. doT.js

doT.js 包含為瀏覽器和Node.js 準(zhǔn)備的 JavaScript 模板引擎。

3. jSmart

jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。

4. dom.js

dom.js 是一款可用在客戶端和服務(wù)器端的 JavaScript 模板引擎

5. jade

Jade是受Haml的影響以JavaScript實(shí)現(xiàn)用于node的高性能模板引擎。

6. Hogan.js

來自 Twitter 的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一個(gè) JavaScript 的頁面模板庫(kù)

8. artTemplate

artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測(cè)試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。引擎支持調(diào)試。若渲染中遇到錯(cuò)誤，調(diào)試器可精確定位到產(chǎn)生異常的模板語句，解決前端模板難以調(diào)試的問題。

獨(dú)有模板編譯工具，它能把前端模板編譯成不依賴模板引擎運(yùn)行的JS文件，讓前端模板可以突破瀏覽器的限制，實(shí)現(xiàn)像后端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在 2kb(gzip) 中實(shí)現(xiàn)！

也許你會(huì)覺得這個(gè)插件名似曾相識(shí)，沒錯(cuò)！這個(gè)也是artDialog的作者糖餅

博客地址：http://www.planeart.cn/

引用引擎

復(fù)制代碼代碼如下:

編寫模板

復(fù)制代碼代碼如下:

<script id="test" type="text/html">

//使用一個(gè)type="text/html"的script標(biāo)簽存放模板：

<h1><%=title%></h1>

<ul>

  <%

    for(i=0;i<list.length;i++){%>

      <li>itemL <%=i+1%>:<%=list[i]%></li>

    <%}%>

</ul>

//模板邏輯語法開始與結(jié)束的界定符號(hào)為<% 與%>，若<%后面緊跟=號(hào)則輸出變量?jī)?nèi)容

</script>

渲染模板

復(fù)制代碼代碼如下:

var data = {

    title: '標(biāo)簽',

    list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']

};

var html=template.render("test",data);

document.getElementById('content').innerHTML = html;

您可能感興趣的文章:

相關(guān)文章

Javascript類型系統(tǒng)之String字符串類型詳解
這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下
2016-06-06
有關(guān)json_decode亂碼及NULL的問題
json decode出現(xiàn)中文亂碼，返回null，很多朋友都遇到過吧，該怎么解決呢？下面小編把解決辦法分享在腳本之家網(wǎng)站上，供大家學(xué)習(xí)
2015-10-10
微信小程序授權(quán)登錄實(shí)現(xiàn)方案wx.getUserProfile(2022年最新版)
微信在最近開始要求使用wx.getUserProfile()來獲取用戶的昵稱,頭像等信息,所以下面這篇文章主要給大家介紹了關(guān)于2022年最新版微信小程序授權(quán)登錄實(shí)現(xiàn)方案wx.getUserProfile的相關(guān)資料,需要的朋友可以參考下
2022-11-11
JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁地震撕裂效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁地震撕裂效果代碼,引入第三方插件實(shí)現(xiàn)頁面的抖動(dòng)、撕裂及圖片等效果,需要的朋友可以參考下
2015-10-10
JavaScript日期類型的一些用法介紹
這篇文章主要介紹了JavaScript日期類型的一些用法介紹,本文講解了獲取某個(gè)月份的天數(shù)、獲取時(shí)區(qū)、計(jì)算運(yùn)行時(shí)間、刪除cookie等用法,需要的朋友可以參考下
2015-03-03
詳解微信小程序「渲染層網(wǎng)絡(luò)層錯(cuò)誤」的解決方法
這篇文章主要介紹了詳解微信小程序「渲染層網(wǎng)絡(luò)層錯(cuò)誤」的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
JavaScript如何判斷對(duì)象有某屬性
這篇文章主要介紹了JavaScript如何判斷對(duì)象有某屬性,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
JavaScript 字符串與數(shù)組轉(zhuǎn)換函數(shù)[不用split與join]
下面的代碼，不考慮他的運(yùn)行效率的話，思路不錯(cuò)，大家可以看看，但在實(shí)際的應(yīng)用中，我們?nèi)匀皇褂胹plit或join來實(shí)現(xiàn)數(shù)組的操作。
2009-12-12
談?wù)凧avaScript中super(props)的重要性
今天小編就為大家分享一篇關(guān)于談?wù)凧avaScript中super(props)的重要性，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-02-02
flash調(diào)用js中的方法,讓js傳遞變量給flash的辦法及思路
前幾天發(fā)表了將FlashVars寫在JS函數(shù)中，實(shí)現(xiàn)與后臺(tái)的實(shí)時(shí)變量更新，但是僅支持 IE，隨后與 Luckyer 進(jìn)行了交流，發(fā)現(xiàn)用 SetVariable 可以很方便的實(shí)現(xiàn)多瀏覽器兼容。舉例如下。
2013-08-08