ejs母版頁讓你的node.js應用開發更快更有效- 一介布衣
引子:
母版頁之方便之處相信做過web開發的都不用說太多,可以重複利用資源,維護方便,開發起來你只需關注當前頁變動的東西,固定不變的全部放到母版頁,可以理解爲前人栽樹後人乘涼,省時,省力,省心.下面圍繞2點簡單說下.
一.node.js開發,基於ejs引擎的母版頁
二.前提環境 ,如何使用及示例介紹
-
就像上面的這個圖,如果你的業務說覆蓋的頁面只有中間是變化的,那麼其他部分完全可以放到母版頁中呈現.
node.js 下的web應用開發有2種模板引擎 ejs 和 jade ,當然你可能直接用jquery 的前端模板後端ajax請求數據等等....(也算一種吧)
ejs 下如何使用母版頁?
-
ejs的母版頁功能支持需要依賴一個第三方包 ejs-mate 可以根據npm install ejs-mate 直接安裝 Express 需要4.0以上
安裝後使用方法如下:
var app = express();
app.set('view engine', 'html');
app.engine('html', require('ejs-mate'));
app.locals._layoutFile = 'layout.html';
上面指定ejs引擎渲染html 文件,接着指定使用 ejs-mate 做母版頁引擎,最後指定 母版頁是 layout.html
這裏有個 app.locals 這個變量,提一句,可以把 locals 理解成客戶端的一個全局變量,我們現在給變量的_alyoutFile 屬性賦值 'layout.html'
這樣在後端指定母版頁的好處是,你不需要在view中的html頁面裏特定指定誰是你的母版頁.
如果上面最後一句你不寫,需要在前端每個頁面指定渲染的母版頁,假設 index.ejs 套用母版頁前代碼如下:
<% layout('layout.html') -%>
<span>Hello World!</span>
如果你的母版頁是這樣的:
<!DOCTYPE html>
<html>
<head>
<title>It's title</title>
</head>
<body>
<section>
<%-body -%>
</section>
</body>
</html>上面的<%-body %> 就是每個頁面的變體,就是你要專心關注的東西.
上面的 index.ejs 套用母版頁之後渲染出的html如下:
<!DOCTYPE html>
<html>
<head>
<title>It's title</title>
</head>
<body>
<section>
<span>Hello World!</span>
</section>
</body>
</html>可以看出來 上面index.ejs 裏的全部代碼 (除去母版頁引用聲明代碼 <% layout('layout.html') -%> ) 都填充到了母版頁的 <%-body %>處.
到這裏就簡單的介紹完了node.js下ejs引擎的母版頁使用方法,簡單好用,提高效率- 一介布衣