元总结---express框架之模板引擎、片段视图、视图助手

Logdown博文地址

#元总结
什么是元总结？元在英文里就是meta，元数据就是能够描述数据的数据，元编程就是能够操作代码的代码。那么，我今天想要说的元总结就是对总结进行总结的总结。是不是很绕，很好，这就是我要的效果。
每天写博文，其实就是一种总结，把这段时间学到的、感受到体验到的、做错的事情总结性的写下来，其实经常博文的主题，也就是不经意间的一个感悟，然后把这个主题大概记下来，通过早上来写出来。有一段时间每天睡前都会做一个事情，就是把今天做的番茄钟全部回顾一片，然后统计成数据，之后一段时间因为工作比较混杂，很难完成一个完整的番茄钟了，导致这个总结也都没做下去，这一点也是需要改进的。
早起已经坚持了半年了，前几天稍微回顾了下，发现这个过程中还是存在些许问题的：

• 1. 10300600（10点30睡，6点醒还是没实现）晚睡主要原因是因为爱人，早醒没办法完成的原因是晚睡了，时间应该贴合实际所能达到的程度
• 2. 前一天晚上就写好番茄钟的每日计划被搁置了
• 3. 醒来的时候，有时候会看一会新闻
• 4. 每周获取的信息很大，而信息获取后没有梳理归纳

元总结的内容：

• 1. 番茄钟和番茄钟的总结需要继续
• 2. 临睡前要对后一天的番茄钟钟做好准备和规划，准备好第二天要做的事情，包括起床要做的
• 3. 10300600计划暂改动为11000630
• 4. 早醒后的时间是一天中效率最高的，不应该用来看新闻
• 5. 早醒后可以稍微运动运动
• 6. 每周应当对微信、博客或许的信息进行一次归纳总结；
• 7. 准备一杯水在床头，醒来就喝

--------------***分割线***----------------------
# 模板引擎
## 什么是模板引擎
模板引擎（Template Engine）是一个从页面模板根据一定的规则生成 HTML的工具，既建立一个HTML模板，插入可执行的代码。PHP、ASP、JSP、Vm都是模板引擎。
## 为什么不直接用HTML
如果一个网站全部资源都要用静态的HTML来展现，那一个网站要成千上万的静态页面，关键还很不灵活。
因此用嵌入逻辑的模板来构建网站，降低了动态网站的开发门槛，在通过MVC模式消除逻辑和页面的耦合程度。
## 模板引擎与控制器

***图1-3 模板引擎在MVC中的位置***

## 设置模板引擎
在app.js中，设置模板引擎和页面模板的位置。

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

```nodejs routes/index.js片段
res.render('index', { title: 'Express' });
```

res.render 的功能是调用模板引擎，并将其产生的页面直接返回给客户端。它接受两个参数，第一个是模板的名称，即 views 目录下的模板文件名，不包含文件的扩展名；第二个参数是传递给模板的数据，用于模板翻译。

```ejs index.ejs
<h1><%= title %></h1>
Welcome to <%= title %>

```

上面代码其中有两处 <%= title %>，用于模板变量显示，它们在模板翻译时会被替换成 Express，因为 res.render 传递了 { title: 'Express' }。
## Ejs的标签
ejs 的标签系统非常简单，它只有以下3种标签：

<% code %>：JavaScript 代码。
<%= code %>：显示替换过 HTML 特殊字符的内容。
<%- code %>：显示原始 HTML 内容。

## Layout.ejs
之前已经提到过，Layout.ejs相当于Java的装饰模式，会自动替换<%- body %>、<%- title %>等部分的内容。
可以在app.js中通过以下代码关闭。

```nodejs app.js片段
app.set('view options', {
layout: false
});
```

Layout是默认的装饰页面，还可以通过如下代码指定装饰的页面。

```nodejs index.js片段
function(req, res) {
res.render('userlist', {
title: '用户列表后台管理系统',
layout: 'admin'
});
};
```

这样就会自动套用admin.ejs来装饰了。
# 片段视图
片段视图 （partials），它就是一个页面的片段，通常是重复的内容，用于迭代显示。类似Jsp的 <c:foreach>来循环生成页面的方式。
Express3.x是某人不适用片段视图的，之前已经有说如何导入片段视图插件已经如何适用插件了，就不重复列举了。直接上个例子吧。

```nodejs app.js片段
app.get('/userlist',routes.userlist);
```

```nodejs routes/index.js片段
exports.userlist = function(req, res) {
res.render('list',{
        title:'List',
        items:[1988,'David','birthday','HelloWorld']
});
};
```

partial 是一个可以在视图中使用函数，它接受两个参数，第一个是片段视图的名称，第二个可以是一个对象或一个数组，如果是一个对象，那么片段视图中上下文变量引用的就是这个对象；如果是一个数组，那么其中每个元素依次被迭代应用到片段视图。片段视图中上下文变量名就是视图文件名，例如上面的'listitem'。

```ejs views/list.ejs
[list]<%- partial('listitem', items) %>[/list]
```

```ejs views/listitem.ejs
[*]<%= listitem %>

```

运行结果：



# 视图助手
上一章节的partial就是一种视图助手，视图助手分为两种：静态视图助手和动态视图助手。Partial属于静态视图助手。
静态视图助手可以是任何类型的对象，包括接受任意参数的函数，但访问到的对象必须是与用户请求无关的，而动态视图助手只能是一个函数，这个函数不能接受参数，但可以访问 req 和 res 对象。

Express3.x中，视图助手的使用发生了变化，我试验了挺久的，终于知道如何解决了。边看代码边解释吧。

```nodejs app.js
……
var util = require('util');
var partials = require('express-partials');
……

// helpers
app.locals({
inspect: function(obj) {
return util.inspect(obj, true);
}
});
// dynamicHelpers
app.use(function(req,res,next){
res.locals.headers= req.headers;
res.locals.dyvar = "This is a dynamic var!";
next();
});


app.use(app.router);
……
app.get('/helper',routes.helper);
……
```

开始要先引入util模块，因为测试方法需要用到。
然后看备注可以看到helpers和dynamicHelpers在3.x中如何实现，特别要记住，一定要放在app.use(app.router);这句话之前，否则在locals里面设置的值是无效的。

然后就是添加路由规则模块的方法。

```nodejs routes/index.js片段
exports.helper =  function(req, res) {
res.render('helper', {
title: 'Helpers'
});
```

```ejs views/helper.ejs
<%= locals.dyvar %>
<%=inspect(locals.headers)%> 
```

注意：在页面中应用一定要记得要locals.headers

然后就可以运行看结果了。