在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