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


Posted in NodeJs onJuly 19, 2011

模板引擎

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。

<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 + '/https://3water.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>

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

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

NodeJs 相关文章推荐
nodejs npm package.json中文文档
Sep 04 NodeJs
Nodejs学习笔记之测试驱动
Apr 16 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
nodejs和C语言插入mysql数据库乱码问题的解决方法
Apr 14 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodejs 最新版安装npm 的使用详解
Jan 18 NodeJs
nodejs基础之多进程实例详解
Dec 27 NodeJs
nodejs微信开发之接入指南
Mar 17 NodeJs
nodejs提示:cross-device link not permitted, rename错误的解决方法
Jun 10 NodeJs
NodeJS和浏览器中this关键字的不同之处
Mar 03 NodeJs
golang、python、php、c++、c、java、Nodejs性能对比
Mar 12 #NodeJs
PHPStorm 2020.1 调试 Nodejs的多种方法详解
Sep 17 #NodeJs
nodejs实用示例 缩址还原
Dec 28 #NodeJs
nodejs 后缀名判断限制代码
Mar 31 #NodeJs
用nodejs访问ActiveX对象,以操作Access数据库为例。
Dec 15 #NodeJs
NodeJS 模块开发及发布详解分享
Mar 07 #NodeJs
nodejs入门详解(多篇文章结合)
Mar 07 #NodeJs
You might like
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
jquery操作 iframe的方法
2014/12/03 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python实现快速多线程ping的方法
2015/07/15 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python检测服务器端口代码实例
2019/08/31 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
食品安全责任书
2014/04/15 职场文书
事业单位鉴定材料
2014/05/25 职场文书
学校志愿者活动总结
2014/06/27 职场文书
护士求职自荐信范文
2015/03/04 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python