首頁 > 文章 > web前端 > 關於NodeJS框架Express的範本視圖機制分析

關於NodeJS框架Express的範本視圖機制分析

不言原創: 2018-06-30 10:15:461478瀏覽

這篇文章主要介紹了關於NodeJS框架Express的模板視圖機制分析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

MVC模式可謂無人不知，除了能增強團隊協作的效率，它還能方便產品的維護升級，本文我們將介紹Express框架的範本和視圖（V）相關功能。

模板引擎

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

haml 的實作Haml
haml.js 接替者，同時也是Express的預設範本引擎Jade
嵌入JavaScript模板EJS
基於CoffeeScript的模板引擎CoffeeKup
的NodeJS版本jQuery模板引擎

視圖渲染（view randering）

視圖的檔案名稱預設需遵循「8a11bc632ea32a57b3e3693c7987c420.4ac516df2bd3b3f39951bf63aa54a6de」的形式，這裡4ac516df2bd3b3f39951bf63aa54a6de是要被載入的模組的名字。例如視圖layout.ejs就是在告訴視圖系統要require(‘ejs')，被載入的模組必須輸出exports.compile(str, options)方法，並且要回傳一個函數來遵守Express的範本介面約定。我們也可以使用app.register()來映射模板引擎到其它檔案副檔名，從而實現更靈活的模板引擎行為，如此一來就可以實現「csser.html」可以被ejs引擎所渲染。

下面我們將用Jade引擎來渲染index.html，因為我們沒有設定layout:false，index.jade渲染後的內容將會被當作body本地變數傳入layout.jade 。

<SPAN style="FONT-SIZE: 13px">app.get(&#39;/&#39;, function(req, res){ 
res.render(&#39;index.jade&#39;, { title: &#39;CSSer, 关注Web前端技术！&#39; }); 
}); 
</SPAN>

新增的「view engine」設定可以指定預設模板引擎，如果我們想要使用jade可以這樣設定：

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

所以我們可以透過下面的方式：

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

取代以下方式:

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

當「view engine」設定後，模板的副檔名就成了可選項，同時我們也可以混合匹配多模板引擎：

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

Express同時提供了視圖選項設置，這些設置會在每次視圖渲染後應用，例如你並不經常使用layouts，就可以這樣設置：

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

如果需要，這些設置可以在後續的res.render()呼叫中被覆寫：

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

可以透過指定一個路徑的方式來實作用自己的layout來取代系統預設的，例如如果我們將「view engine」設為jade並且自訂了一個名為「./views/mylayout.jade」的layout，我們可以這樣使用它：

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

否則必須指定副檔名：

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

這些路徑也可以是絕對路徑：

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: __dirname + &#39;///www.jb51.net/mylayout.jade&#39; }); 
</SPAN>

這方面較好的例子就是自訂ejs模板的開始和關閉的標記：

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

局部視圖（View Partials）
Express視圖系統原生支援局部和集合視圖，這稱為微型視圖，主要用於渲染一個文件片段。例如與其在視圖中循環顯示評論，不如使用局部集合（partial collection）：

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

如果不需要其它選項或本地變量，我們可以省略對象而簡單的傳入評論數組，這和上面的範例是一樣的：

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

當使用局部集合時，支援一些「魔術」本地變數：

firstInCollection 當為第一個物件時該值為true
#indexInCollection 集合中物件的索引值
#lastInCollection 當最後一個物件時為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.

。（或產生）的本地變數優先，但傳入父視圖的本地變數在子視圖仍有效。因此如果我們用partial(‘blog/post', post)來渲染部落格日誌時，將產生post的本地變量，但呼叫本函數的視圖擁有本機用戶，它在blog/post視圖依然有效。（一回註：這段翻譯感覺有問題，請高人指點）。

效能提示：當使用局部集合渲染100長度的陣列就意味著需要渲染100次視圖，對於簡單的集合你可以將循環內聯，而不要使用局部集合，這樣可以減少系統開銷。

視圖查找（View Lookup）

#視圖查找是相對於父視圖進行的，例如我們有一個名為「views/user /list.jade」的頁面視圖，如果在該視圖中呼叫partial('edit')，視圖系統將會嘗試尋找並載入“views/user/edit.jade”，而partial('.. /messages')將載入“views/messages.jade”。

檢視系統也支援索引模板，這樣你就可以使用一個同名的目錄。例如，在一個路由中我們執行res.render(‘users')，這將指向「views/users.jade」或「views/users/index.jade」。

當使用上面的索引視圖時，我們可以透過partial('users')從同名目錄下引用“views/users/index.jade”，同時視圖系統會嘗試“ ../users/index”，這能減少我們呼叫partial('index')的需要。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

關於NodeJS框架Express的範本視圖機制分析

模板引擎

視圖渲染（view randering）

視圖查找（View Lookup）

相關文章