樣板引擎
網站的 server 端為了要把『網頁+資料』融合呈現出來,通常會使用『樣版引擎』。
如果要在前端融合呈現,樣版引擎也可以放在前端的瀏覽器內,由 javascript 呼叫。
因此有許多 javascript 的樣版引擎被開發出來,像是 swig, pug (jade), ejs, mustache, handlebar.js 等等。
以下是幾個樣板的範例:
1 - EJS
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
2 - PUG
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.
甚至你也可以自己用『正規表達式』很快地寫一個樣版引擎:
檔案:miniTemplateTest.js
var templateEngine = function (template, obj) {
return template.replace(/\{\{(.*?)\}\}/gmi, function (match, p1) {
if (p1 != null) return eval('obj.'+p1)
})
}
var template = '<p>Hello, my name is {{name}}. I\'m {{profile.age}} years old.</p>'
console.log(templateEngine(template, {
name: "ccc",
profile: { age: 43 }
}))
測試:
結果:
=========================================
$ node miniTemplateTest.js
<p>Hello, my name is ccc. I'm 43 years old.</p>
但是在 ECMA Script 6 (ES6) 提出了『模板字符串』(template string)之後,我們其實可以用『模板字符串』來取代樣版引擎,只是通常不能直接在『模板字符串』內寫程式,而是要採用『子樣板=>樣板=>母樣板』這樣的順序逐步建立樣板,而不能在像很多樣版引擎一樣,直接內崁程式在裡面就是了。
以下是一個『模板字符串』的範例:
檔案: es6template.js
var name = 'ccc'
var profile = { age: 43 }
console.log(`<p>Hello, my name is ${name}. I'm ${profile.age} years old.</p>`)
執行:
bash-3.2$ node es6template.js
<p>Hello, my name is ccc. I'm 43 years old.</p>
更多關於 ES6 『模板字符串』的訊息,請參考下列文章: