Express.js中的locals用法

简介:

引子

在Express.js 4.x框架中存在两个locals定义。一个是Express本身带有的locals属性(Object类型),另一个是Response的locals属性(Object类型)。


在本文中,我们来讨论一下Express本身带有的locals属性用法。


Express.js 2.x时代

先看历史:在Express.js 2.x时代,还没有出现locals,而是使用app.helpers 和app.dynamicHelpers 。在express2.X中,你可以使用它们分别作为静态/动态视图助手工具。


有一个简单的例子,如下:

1
<span style= "font-size:14px;" >app.helpers({<br data-filtered= "filtered" ><span style= "white-space:pre" ></span>inspect:  function (obj) {<br data-filtered= "filtered" ><span style= "white-space:pre" ></span> return  util.inspect(obj,  true );<br data-filtered= "filtered" >}<br data-filtered= "filtered" >});</span>


Express.js 3.X/4.X时代

如今,Express本身带有的locals属性把上述两个Helper替换掉了。官方说法是:


The app.locals object is a JavaScript object, and its properties are local variables within the application.


也就是说,你可以在Express程序的生命周期内为其locals这个对象属性定义任意你喜欢的属性(当然包括函数),然后在你需要的地方使用。但是,有重要提示与说明,如下:


Once set, the value of app.locals properties persist throughout the life of the application, in contrast with res.locals properties that are valid only for the lifetime of the request.

You can access local variables in templates rendered within the application. This is useful for providing (1)helper functions to templates, as well as (2)app-level data. Note, however, that you CANNOT access local variables in middleware.


上面的E文不用我翻译了,翻译得拙劣反而会歪曲的原文主旨。


因此,作者在新版本中作上述更新(当然是替换)是极有道理的。因此,在新版本中(时下最流行的自然是4.X),locals的作用进一步扩展,而不仅限于作为模板视图的工具函数使用。

值得注意的是,3.X与4.X中也有一些不同(摘录http://blog.csdn.net/ling369523246/article/details/49487509的例子如下):

............

但是在express 3.x后 这两个方法被废止。

3.x 使用的是 


app.locals({
   key2: value1,
   key2: value2
})
就有如下:
app.locals({
 inspect: function(obj) {
 return util.inspect(obj, true);
}
});


但是express4.x后变化就很大了
app.locals.key1 = value1;app.locals.key2 = value2; 
如下:app.locals.inspect=function(obj){
    return util.inspect(obj, true);
}


在.jade模板中使用locals简介

至于在.jade等模板中如何使用locals中定义的属性,在stackoverflow中有相应的解决,而且来自express.js作者TJ Holowaychuck,示例及说明如下。

下面这一段不是来自EXPRESS.JS作者(尽管使用的是3.0,现在不再有):

Here is an example using a fresh installation of express v3.0.0rc4

app.js:

app.use(function(req, res, next){
  res.locals.variable="Hello locals from Response!";
  next();
  }
)
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');

app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());

app.use(express.static(path.join(__dirname, 'public')));
});

index.jade:

extends layout

block content
  h1= title
  p Welcome to #{title}
  p=variable


注意,上面例子中使用了Response对象中定义的locals,运行结果如下图所示:


wKioL1dt7aXD8_XKAADYvYaRPP4038.png-wh_50



来自express.js作者TJ Holowaychuck的上述使用忠告则强调了使用顺序:

the one key thing you have to remember (currently), is that all of the 
routes (app.get, app.put, etc) 
are part of a routing middleware called app.router (this is an 
instance of a Router). So app.use() 
works with individual middleware, so if you call it between two 
app.get() calls for example it's 
not actually added between them. 

so you might want to do something like: (这里使用示例说明使用顺序的问题)

app.use(loadViewData); 
app.use(app.router); 

app.get('/..... 

that way it's before the routes. 

I should note that I've played with each app.{get,put,...}() call 
being its 
own middleware, which is nice in a lot of ways but I need to improve 
the 
performance of that solution before considering it


使用了Express对象中定义的locals简介


使用Express对象中定义的locals详细分析起来要复杂一些。正如上面解释的,至少应当考虑两种情形:在模板引擎中如何使用Express对象中定义的locals;第二,作为app-level data如何使用Express对象中定义的locals。


在此,仅看一下第一种情形的举例。


在app.js中,有如下定义:


1
2
3
4
5
6
7
8
9
10
11
12
13
app.use( function (req, res, next){
   app.locals.appvariable={
     "key1" : "Hello locals" ,
     "key2" :121,
     "startX" : function (){console.log( "xxxxxxxxxx." );}
   };
   app.locals.tt= function (){console.log( "MMMMMMMMMMM" );};
   //app.locals.startX=function(para1,para2){
   //  console.log("Now start starting...");
   //};
   res.locals.variable =  "Hello locals from Response!" ;
   next(); //MUST HAVE
});

那么,在模板文件index.jade中可以使用如下表达方式:


extends layout

block content

  h1= title

  p Welcome to #{title}

  p=variable

  br

  h2=appvariable.key1


关于更一般作为express应用程序生命周期内data使用的locals属性的用法,在此恕不介绍,有兴趣的朋友可以进一步探讨这方面的应用。

关于Express中的locals属性用法讨论至此,欢迎一起作进一步探讨......















本文转自朱先忠老师51CTO博客,原文链接:http://blog.51cto.com/zhuxianzhong/1792781 ,如需转载请自行联系原作者





相关文章
|
5月前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
162 2
|
5月前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
283 0
|
2月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
203 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
1月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
16 1
|
1月前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
34 6
|
1月前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
172 4
|
2月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
2月前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
1月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
57 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。