关于NodeJS框架Express的模板视图机制分析

MVC模式可谓无人不知，它除了能增强团队协作的效率，还可方便产品的维护升级，本文我们将对Express框架的模板和视图（V）相关功能进行介绍。

模板引擎

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

视图渲染（view randering）

视图的文件名默认需遵循“<name>.<engine>”的形式，这里<engine>是要被加载的模块的名字。比如视图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('/', function(req, res){ 
res.render('index.jade', { title: 'CSSer, 关注Web前端技术！' }); 
}); 
</SPAN>

新增的“view engine”设置可以指定默认模板引擎，如果我们想使用jade可以这样设置：

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

于是我们就可以通过下面的方式：

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

代替如下方式:

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

当“view engine”设置后，模板的扩展名就成了可选项，同时我们还可以混合匹配多模板引擎：

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

Express同时提供了视图选项设置，这些设置会在每次视图渲染后应用，比如你并不经常使用layouts，就可以这样设置：

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

如果需要，这些设置可以在后续的res.render()调用中被覆盖：

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

可以通过指定一个路径的方式来实现用自己的layout来代替系统默认的，比如如果我们将“view engine”设置为jade并且自定义了一个名为“./views/mylayout.jade”的layout，我们可以这样使用它：

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

否则必须指定扩展名：

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

这些路径也可以是绝对路径：

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

这方面较好的例子就是自定义ejs模板的开始和关闭的标记：

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

局部视图（View Partials）
Express视图系统原生支持局部和集合视图，这称作微型视图，主要用于渲染一个文档片段。比如与其在视图中循环显示评论，不如使用局部集合（partial collection）：

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

如果不需要其它选项或本地变量，我们可以省略对象而简单的传入评论数组，这和上面的示例是一样的：

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

当使用局部集合时，支持一些“魔术”本地变量：

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')的需要。