在Express的页面模板中的变量的定义与使用总结

前言

最近在使用Express框架中的ejs页面模板趟了些许坑，仅以本文记录总结。

本文简述的均为ejs页面模板。

创建ejs变量的各种方法

1. 在Nodejs定义的ejs变量

ejs由是在node层调用Response的render方法渲染出来的：

index.js:

var renderData = {a:1};
resp.render("/aaa/bbb/ccc", renderData);

如上例，在ejs页面中就可以直接使用变量a：

index.ejs:

<%= a %>

2. 页面内使用var定义变量

在ejs页面中使用行内模板js代码来定义变量：

index.ejs:

<% var a = 1; %>

3. 页面内给locals对象新增变量

还可以在ejs页面行内js代码中给locals对象新增属性定义变量：

index.ejs:

<% locals.a = 1; %>

使用ejs变量的各种方法

1.直接写变量名使用：

index.ejs:

<%= a %>

2.调用 locals.变量名 使用：

index.ejs:

<%= locals.a %>

并不是上述三种定义的方案都可以使用这两种调用方法

1. 使用方法1定义的变量（即在Nodejs中定义），可以使用这两种调用方法。

2. 使用方法2定义的变量（即页面内var定义），只能使用第一种调用方法，即页面内直接写变量名使用

3. 使用方法3定义的变量（即页面内locals定义），可以使用这两种调用方法。

4. 其他区别：使用在Nodejs中和页面locals中定义方法定义的变量，可以使用对locals对象遍历，拿到所有用户定义的变量。而使用页面内var定义的变量，不能通过遍历locals来获取，也就是不知道用户新创建了哪些变量。

结论：

如在页面模板中，尽可能使用locals.xxx的方式来定义变量，这样定义的变量的通用性最高。

locals中附加的系统变量

settings : {
    env:"development"
    etag:"weak"
    jsonp callback name:"callback"
    port:8222
    query parser:"extended"
    subdomain offset:2
    trust proxy:false
    view engine:"ejs"
    views:"/Users/xxx/yyy/zzz"
    x-powered-by:true
}

通过locals来设定全局变量

locals是express框架中提供的变量，用于在模板中定义，调用各种变量，同时也支持全局变量，可以跨页面在各个模板中均可调用访问。

1. 应用级全局变量：app.locals

这里的app变量是指：var app = express();的app，即express实例。

通过给app.locals.xxx设定新增属性来实现在全express应用中各个ejs页面中均可直接使用。如：

app.locals["CONFIG"] = "xxxx";

可以在任何ejs页面中可以使用<%= CONFIG %>变量。

2. 响应级全局变量：resp.locals

这个的resp是指express的use中间件的Response对象：

app.use(function (req, resp, next) {...}

可以通过对resp.locals.xxx设定值来实现在当前响应中

resp.locals["UID"] = "xxx";

也可以实现与app.locals相同的效果，令所有页面模板可直接使用。

两种全局变量的区别

1. app.locals是全应用唯一，也是全局共享，缺点是任何人修改都会影响整所有其他用户。适用于放置一些应用配置类型的常量数据。
2. resp.locals是响应范围内的全局数据，使用与在对某一个Response处理的各个阶段共享的数据。适用于放置一些用户配置类型的数据，如授权信息，ID等。
3. 注意：app.locals.**可以被response.locals.**的同名属性值覆盖；response.locals.**可以被render页面的renderData.**的同名属性覆盖。
4. 上述两种全局locals，不仅可以在页面模板中使用，也可以在js代码中使用。

引用

1. 有关app.locals的详细信息:
   
   http://expressjs.com/en/4x/api.html#app.locals

2. 有关resp.locals的详细信息：
   
   http://expressjs.com/en/4x/api.html#res.locals