前言
最近在使用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定義的變量(即在Nodejs中定義),可以使用這兩種調用方法。
-
使用方法2定義的變量(即頁面內var定義),只能使用第一種調用方法,即頁面內直接寫變量名使用
-
使用方法3定義的變量(即頁面內locals定義),可以使用這兩種調用方法。
-
其他區別:使用在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
相同的效果,令所有頁面模板可直接使用。
兩種全局變量的區別
app.locals
是全應用唯一,也是全局共享,缺點是任何人修改都會影響整所有其他用戶。適用於放置一些應用配置類型的常量數據。resp.locals
是響應范圍內的全局數據,使用與在對某一個Response處理的各個階段共享的數據。適用於放置一些用戶配置類型的數據,如授權信息,ID等。- 注意:
app.locals.**
可以被response.locals.**
的同名屬性值覆蓋;response.locals.**
可以被render頁面的renderData.**
的同名屬性覆蓋。 - 上述兩種全局locals,不僅可以在頁面模板中使用,也可以在js代碼中使用。
引用
-
有關
app.locals
的詳細信息:
http://expressjs.com/en/4x/api.html#app.locals -
有關
resp.locals
的詳細信息:
http://expressjs.com/en/4x/api.html#res.locals