當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js模版引擎介绍

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

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

js模版引擎介紹

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

什么時候使用JavaScript模板？

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

概述

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

語法，定義模板書寫方式

Embedded JavaScript Templates，意思是說你可以將js直接寫在模板里面，從而實現(xiàn)一些復(fù)雜的渲染邏輯。基于原生 JS語法，解析簡單、渲染性能接近極限；書寫略煩，容易導(dǎo)致模板中出現(xiàn)過多的業(yè)務(wù)代碼而失控。
Logic-less Templates，這種模板引擎的哲學(xué)是模板應(yīng)當(dāng)同邏輯盡可能的分離，因此，你不能在模板中隨意加入js代碼，而只能利用模板引擎本身提供的機制來實現(xiàn)一些簡單的功能。基于自定義語法，解析復(fù)雜、渲染性能不一

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

手寫解析器，基于正則的字符串解析、轉(zhuǎn)義
基于解析器生成器自動生成
基于 DOM 結(jié)構(gòu)存儲模板，解析存儲在 data- 的配置

編譯，模板為直接可直接運行的函數(shù)

及時編譯
預(yù)編譯
延遲編譯

緩存，用于提升性能

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

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

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

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

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

)

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

關(guān)鍵點

文件9kb大小（很小）
簡單
無依賴
無邏輯
非預(yù)編譯模板
編程語言無關(guān)

模板：

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

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

數(shù)據(jù)：

{

"header":?"Colors",

"items":?[

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

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

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

"empty":?false

}

渲染結(jié)果：

<h1>Colors</h1>

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

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

關(guān)鍵點

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

<ul?id="list">

</ul>

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

對應(yīng)適用json數(shù)據(jù)

var?data?=?{

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

"error":"數(shù)據(jù)取出錯誤"

}

這里{{#if}}判斷是否存在list數(shù)組，如果存在則遍歷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)，以數(shù)組“People”為例，并在網(wǎng)站上鏈接到他們的個人頁面：

// 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 倍。引擎支持調(diào)試。若渲染中遇到錯誤，調(diào)試器可精確定位到產(chǎn)生異常的模板語句，解決前端模板難以調(diào)試的問題。?
獨有模板編譯工具，它能把前端模板編譯成不依賴模板引擎運行的JS文件，讓前端模板可以突破瀏覽器的限制，實現(xiàn)像后端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在 2.7kb(gzip) 中實現(xiàn)！

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>

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

3.渲染模板

template.render(id, data);

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

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

"data":[

{

name:"王靜",

score:4.5,

photo:'images/logo.png',

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

desc:'婦科、不孕不育癥、月經(jīng)病等',

position:'副醫(yī)師'

{

name:"啦啦",

score:4.9,

photo:'images/logo.png',

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

desc:'兒童呼吸系統(tǒng)疾病的診治，對于兒童疾病',

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

}

]

});

Juicer (Github地址)

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

使用方法

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

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