快捷導(dǎo)航

NodeJS框架Express的模板視圖機(jī)制分析

更新時(shí)間：2011年07月19日 00:37:15 作者：

MVC模式可謂無人不知，它除了能增強(qiáng)團(tuán)隊(duì)協(xié)作的效率，還可方便產(chǎn)品的維護(hù)升級(jí)，本文我們將對(duì)Express框架的模板和視圖（V）相關(guān)功能進(jìn)行介紹。

模板引擎

Express支持許多模板引擎，常用的有：

haml 的實(shí)現(xiàn)Haml
haml.js 接替者，同時(shí)也是Express的默認(rèn)模板引擎Jade
嵌入JavaScript模板EJS
基于CoffeeScript的模板引擎CoffeeKup
的NodeJS版本jQuery模板引擎

視圖渲染（view randering）

視圖的文件名默認(rèn)需遵循“<name>.<engine>”的形式，這里<engine>是要被加載的模塊的名字。比如視圖layout.ejs就是在告訴視圖系統(tǒng)要require(‘ejs')，被加載的模塊必須輸出exports.compile(str, options)方法，并要返回一個(gè)函數(shù)來遵守Express的模板接口約定。我們也可以使用app.register()來映射模板引擎到其它文件擴(kuò)展名，從而實(shí)現(xiàn)更靈活的模板引擎行為，如此一來就可以實(shí)現(xiàn)“csser.html”可以被ejs引擎所渲染。

下面我們將用Jade引擎來渲染index.html，因?yàn)槲覀儧]有設(shè)置layout:false，index.jade渲染后的內(nèi)容將被作為body本地變量傳入layout.jade。

復(fù)制代碼代碼如下:

 
<SPAN style="FONT-SIZE: 13px">app.get('/', function(req, res){ 
res.render('index.jade', { title: 'CSSer, 關(guān)注Web前端技術(shù)！' }); 
}); 
</SPAN> 

新增的“view engine”設(shè)置可以指定默認(rèn)模板引擎，如果我們想使用jade可以這樣設(shè)置：

復(fù)制代碼代碼如下:

 
<SPAN style="FONT-SIZE: 13px">app.set('view engine', 'jade'); 
</SPAN> 

于是我們就可以通過下面的方式：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('index'); 
</SPAN> 

代替如下方式:

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('index.jade'); 
</SPAN> 

當(dāng)“view engine”設(shè)置后，模板的擴(kuò)展名就成了可選項(xiàng)，同時(shí)我們還可以混合匹配多模板引擎：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('another-page.ejs'); 
</SPAN> 

Express同時(shí)提供了視圖選項(xiàng)設(shè)置，這些設(shè)置會(huì)在每次視圖渲染后應(yīng)用，比如你并不經(jīng)常使用layouts，就可以這樣設(shè)置：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">app.set('view options', { 
layout: false 
}); 
</SPAN> 

如果需要，這些設(shè)置可以在后續(xù)的res.render()調(diào)用中被覆蓋：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('csser-view.ejs', { layout: true }); 
</SPAN> 

可以通過指定一個(gè)路徑的方式來實(shí)現(xiàn)用自己的layout來代替系統(tǒng)默認(rèn)的，比如如果我們將“view engine”設(shè)置為jade并且自定義了一個(gè)名為“./views/mylayout.jade”的layout，我們可以這樣使用它：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: 'mylayout' }); 
</SPAN> 

否則必須指定擴(kuò)展名：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: 'mylayout.jade' }); 
</SPAN> 

這些路徑也可以是絕對(duì)路徑：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: __dirname + '/http://www.dbjr.com.cn/mylayout.jade' }); 
</SPAN> 

這方面較好的例子就是自定義ejs模板的開始和關(guān)閉的標(biāo)記：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">app.set('view options', { 
open: '{{', 
close: '}}' 
}); 
</SPAN> 

局部視圖（View Partials）
Express視圖系統(tǒng)原生支持局部和集合視圖，這稱作微型視圖，主要用于渲染一個(gè)文檔片段。比如與其在視圖中循環(huán)顯示評(píng)論，不如使用局部集合（partial collection）：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">partial('comment', { collection: comments }); 
</SPAN> 

如果不需要其它選項(xiàng)或本地變量，我們可以省略對(duì)象而簡單的傳入評(píng)論數(shù)組，這和上面的示例是一樣的：

復(fù)制代碼代碼如下:

<SPAN style="FONT-SIZE: 13px">partial('comment', comments); 
</SPAN> 

當(dāng)使用局部集合時(shí)，支持一些“魔術(shù)”本地變量：

firstInCollection 當(dāng)為第一個(gè)對(duì)象時(shí)該值為true
indexInCollection 集合中對(duì)象的索引值
lastInCollection 當(dāng)為最后一個(gè)對(duì)象時(shí)為true
collectionLength 集合的長度

Local variables passed (or generated) take precedence, however locals passed to the parent view are available in the child view as well. So for example if we were to render a blog post with partial(‘blog/post', post) it would generate the post local, but the view calling this function had the local user, it would be available to the blog/post view as well.

傳入（或生成）的本地變量優(yōu)先，但傳入父視圖的本地變量在子視圖仍有效。因此如果我們用partial(‘blog/post', post)來渲染博客日志時(shí)，將生成post的本地變量，但調(diào)用本函數(shù)的視圖擁有本地用戶，它在blog/post視圖依然有效。（一回注：這段翻譯感覺有問題，請(qǐng)高人指點(diǎn)）。

性能提示：當(dāng)使用局部集合渲染100長度的數(shù)組就意味著需要渲染100次視圖，對(duì)于簡單的集合你可以將循環(huán)內(nèi)聯(lián)，而不要使用局部集合，這樣可以減少系統(tǒng)開銷。

視圖查找（View Lookup）

視圖查找是相對(duì)于父視圖進(jìn)行的，比如我們有一個(gè)名為“views/user/list.jade”的頁面視圖，如果在該視圖中調(diào)用 partial(‘edit')，視圖系統(tǒng)將會(huì)嘗試查找并加載“views/user/edit.jade”，而partial(‘.. /messages')將加載“views/messages.jade”。

視圖系統(tǒng)還支持索引模板，這樣你就可以使用一個(gè)同名的目錄。比如，在一個(gè)路由中我們執(zhí)行res.render(‘users')，這將指向“views/users.jade”或者“views/users/index.jade”。

當(dāng)使用上面的索引視圖時(shí)，我們可以通過partial(‘users')從同名目錄下引用“views/users/index.jade”，同時(shí)視圖系統(tǒng)會(huì)嘗試“../users/index”，這能減少我們調(diào)用partial(‘index')的需要。

您可能感興趣的文章: