當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js模版引擎介绍

發(fā)布時間：2024/8/1 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 js模版引擎介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

js模版引擎介紹

JavaScript 模板是將 HTML 結構從包含它們的內容中分離的方法。模板系統通常會引入一些新語法，但通常是非常簡單的，一個要注意的有趣的點是，替換標記通常是由雙花括號({ {……} })表示，這也是 Mustache 和 Handlebars 名字的來源。

什么時候使用JavaScript模板？

一旦我們發(fā)現自己在 JavaScript 字符串內包含 HTML，就應該開始考慮 JavaScript 模板可能給我們帶來的好處。當建立一個可維護的代碼庫，關注點分離是至關重要的，所以任何可以幫助我們實現這一目標的手段都應該探索。?
在前端 web 開發(fā)，將 HTML 從 JavaScript 分離顯得很重要（這是雙向的，我們也不應該在 HTML 中內聯 JavaScript）

概述

模板引擎大都由 5 部分組成：語法、解析、編譯、緩存、渲染。

語法，定義模板書寫方式

Embedded JavaScript Templates，意思是說你可以將js直接寫在模板里面，從而實現一些復雜的渲染邏輯?；谠?JS語法，解析簡單、渲染性能接近極限；書寫略煩，容易導致模板中出現過多的業(yè)務代碼而失控。
Logic-less Templates，這種模板引擎的哲學是模板應當同邏輯盡可能的分離，因此，你不能在模板中隨意加入js代碼，而只能利用模板引擎本身提供的機制來實現一些簡單的功能?；谧远x語法，解析復雜、渲染性能不一

解析，包括詞法分析（lexical analysis、scanning）和語義分析（syntax analysis、parsing）兩步。

手寫解析器，基于正則的字符串解析、轉義
基于解析器生成器自動生成
基于 DOM 結構存儲模板，解析存儲在 data- 的配置

編譯，模板為直接可直接運行的函數

及時編譯
預編譯
延遲編譯

緩存，用于提升性能

緩存編譯結果（函數）
緩存渲染過程中涉及的數據（查找結果，字符串）
不緩存，由用戶緩存

渲染，執(zhí)行編譯結果，生成 HTML

優(yōu)先從緩存中讀取

各種模板引擎主要是解析方式的不同，語法、編譯、緩存、渲染則各有權衡。

幾種常見模版引擎的介紹：

)

mustache.js (Github地址)?
mustache是logic-less的，所以其一大特點是模板中沒有任何if，for結構，而是通過數據的值來實現分支和循環(huán)的。這種分離帶來的好處是模板清晰，易于維護。

關鍵點

文件9kb大小（很小）
簡單
無依賴
無邏輯
非預編譯模板
編程語言無關

模板：

<h1>{{header}}</h1>

<p>The list is empty.</p>

數據：

{

"header":?"Colors",

"items":?[

{"name":?"red",?"first":?true,?"url":?"#Red"},

{"name":?"green",?"link":?true,?"url":?"#Green"},

{"name":?"blue",?"link":?true,?"url":?"#Blue"}

"empty":?false

}

渲染結果：

<h1>Colors</h1>

<li><a?href="#Green">green</a></li>

handlebars.js (Github地址)?
采用"Logic-less template"（無邏輯模版）的思路，在加載時被預編譯，而不是到了客戶端執(zhí)行到代碼時再去編譯，這樣可以保證模板加載和運行的速度。Handlebars兼容Mustache，你可以在Handlebars中導入Mustache模板

關鍵點

86kb文件大小（大），或者使用預編譯模板是18kb
塊表達式（helpers）
預編譯模板
無依賴

<ul?id="list">

</ul>

<p>{{error}}</p>

對應適用json數據

var?data?=?{

info:['HTML5','CSS3',"WebGL"],

"error":"數據取出錯誤"

}

這里{{#if}}判斷是否存在list數組，如果存在則遍歷list，如果不存在輸出錯誤信息

Embedded JS Teamplates（EJS）?Github地址

來源于ERB模板，且與ERB有很多相似之處。它有著與ERB相同的Tag，且包含很多相同的功能。EJS的特別之處在于，你需要把模板存于單獨文件中，并將文件名傳遞給EJS。它會加載該文件，并返回HTML。?
EJS的特別之處在于，你需要把模板存于單獨文件中，并將文件名傳遞給EJS。它會加載該文件，并返回HTML。

// in template.ejs

Hello,?<%=?name?%>

// in JS file

new?EJS({?url:?"template.ejs"?}).render({?name:?"Jack"?});

// 返回： Hello, Jack

注意，你可以加載文本模板：

new?EJS({?text:?"Hello, <%= name %>"?}).render({?name:?"Jack"});

下面將介紹如何進行循環(huán)，以數組“People”為例，并在網站上鏈接到他們的個人頁面：

// template.ejs

<ul>

<%?for(var?i?=?0;?i?<?people.length;?i++)?{?%>

<%?}?%>

</ul>

// in JS file

new?EJS({?url:?"template.ejs"?}).render({?people:?[?"Jack","Fred"?]?})

// Each rendered <li> will look like:

這與Underscore 有些相似，但要注意“l(fā)ink_to”的使用。它是EJS定義的一個Helper，以便鏈接更容易使用。

art-template(Github地址)

artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。引擎支持調試。若渲染中遇到錯誤，調試器可精確定位到產生異常的模板語句，解決前端模板難以調試的問題。?
獨有模板編譯工具，它能把前端模板編譯成不依賴模板引擎運行的JS文件，讓前端模板可以突破瀏覽器的限制，實現像后端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在 2.7kb(gzip) 中實現！

1.引用js文件：

2.頁面中，使用一個type="text/template"的script標簽存放模板：

<%?for(var?i in data){?var?item=data[i];?%>

<li?class="mui-table-view-cell mui-media ">

<div?class="mui-media-object mui-pull-left">

<img src="<%=(item.photo)%>"?width="100%">

<span?class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>

</div>

<div?class="mui-media-body">

<%=(item.name)%> <span?class="mui-badge mui-badge-warning"><%=(item.position)%></span>

<p?class="mui-ellipsis"><%=(item.hospital)%></p>

<p?class="mui-ellipsis"><%=(item.desc)%></p>

</div>

</a>

</li>

<%?}?%>

</script>

模板邏輯語法開始與結束的界定符號為<% 與 %>，若<%后面緊跟=號則輸出變量內容。

3.渲染模板

template.render(id, data);

繼續(xù)上面的例子：

var?fragment?=?template('doctor-template',?{

"data":[

{

name:"王靜",

score:4.5,

photo:'images/logo.png',

hospital:"江蘇省中醫(yī)院",

desc:'婦科、不孕不育癥、月經病等',

position:'副醫(yī)師'

{

name:"啦啦",

score:4.9,

photo:'images/logo.png',

hospital:"鼓樓醫(yī)院",

desc:'兒童呼吸系統疾病的診治，對于兒童疾病',

position:'主治醫(yī)師'

}

]

});

Juicer (Github地址)

當前最新版本: 0.6.14?
Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實現數據和視圖模型的分離(MVC)。除此之外，它還可以在 Node.js 環(huán)境中運行。

使用方法

編譯模板并根據所給的數據立即渲染出結果.
juicer(tpl,?data);
僅編譯模版暫不渲染，它會返回一個可重用的編譯后的函數.
var?compiled_tpl?=?juicer(tpl);
根據給定的數據，對之前編譯好的模板進行數據渲染.
var?compiled_tpl?=?juicer(tpl);
var?html?=?compiled_tpl.render(data);

總結

以上是生活随笔為你收集整理的js模版引擎介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Lena图像原图及由来
下一篇：智联+影音，AITO问界M7想干翻的不止