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

2024-05-06 14:24:08

字体：大中小

来源：转载

供稿：网友

模板引擎

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

haml 的实现Haml haml.js 接替者，同时也是Express的默认模板引擎Jade 嵌入JavaScript模板EJS 基于CoffeeScript的模板引擎CoffeeKup 的NodeJS版本jQuery模板引擎

视图渲染（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。
代码如下:
app.get('/', function(req, res){
res.render('index.jade', { title: 'CSSer, 关注Web前端技术！' });
});


新增的“view engine”设置可以指定默认模板引擎，如果我们想使用jade可以这样设置：
代码如下:
app.set('view engine', 'jade');


于是我们就可以通过下面的方式：
代码如下:res.render('index');


代替如下方式:
代码如下:res.render('index.jade');


当“view engine”设置后，模板的扩展名就成了可选项，同时我们还可以混合匹配多模板引擎：
代码如下:res.render('another-page.ejs');


Express同时提供了视图选项设置，这些设置会在每次视图渲染后应用，比如你并不经常使用layouts，就可以这样设置：
代码如下:app.set('view options', {
layout: false
});


如果需要，这些设置可以在后续的res.render()调用中被覆盖：
代码如下:res.render('csser-view.ejs', { layout: true });


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


否则必须指定扩展名：
代码如下:res.render('page', { layout: 'mylayout.jade' });


这些路径也可以是绝对路径：
代码如下:res.render('page', { layout: __dirname + '///www.Vevb.com/mylayout.jade' });