在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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM