首頁 > web前端 > js教程 > 主體

常用的JavaScript模板引擎介紹_javascript技巧

WBOY
發布: 2016-05-16 16:12:24
原創
1004 人瀏覽過

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

引用引擎

複製程式碼 程式碼如下:


寫模板

複製程式碼 程式碼如下:


渲染模板

複製程式碼 程式碼如下:

var data = {
    title: '標籤',
    list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板