(38)动态视图助手
express版本:4.13.4
①作用:假如我们需要一个变量,在不同地方的模板(jade文件)都需要调用。
显然,我们不应该使用全局变量(因为可能会带来污染);
事实上,我们需要的是仅仅在模板中起作用的变量,因此视图助手的作用就在这里了。
②流程:
【1】首先,调用express模块,就像我们之前做的那样(事实上,不需要额外声明,当我们使用express框架的时候自然会调用它);
【2】按照正常情况,我们需要进行路由处理,当使用视图助手时,有一件很重要的事情,就是在进行任何路由处理之前使用视图助手。
原因在于,视图助手的处理和路由处理是类似的,他会拦截req和res请求,如果先进行路由的话,那么视图助手是不会被执行的。(即使被执行了,那么由于进行路由处理的时候,没有获取到视图助手的变量,也是不会达成预期目的的);
【3】当明确我们视图助手声明的位置后,我们开始写我们的视图助手:
注意,这里是动态的视图助手;
var app = express(); //生成一个导入的express模块的实例 //定义一个动态视图助手,这段代码要放在路由之前 app.use(function (req, res, next) { //这个是示例,定义一个动态视图助手变量 res.locals.testStr = "这是一个动态视图助手变量"; //这是示例,定义一个动态视图助手方法 res.locals.testFun = function () { return "这是一动态视图助手——函数的返回值" }; //这是另一种定义的方法这种方法似乎不行 /* res.locals({ testStr2: "动态变量2", testFun2: function () { return "动态函数2" } })*/ //必须有next,不然后续的路由没法执行了(因为只被执行一次) next(); })
注意:上面的方法二,据说是可以的,但我自己验证后是不行的,如果可以的话,欢迎指正
写法很简单,app.use方法,参数是回调函数;
回调函数的参数分别是req(请求),res(回应),next(下个函数);
然后把变量放在res.locals之中,声明一个变量testStr,给他赋一个值。
当我们在模板里调用这个变量时,直接使用testStr就可以。
同理,也可以声明一个函数testFun,调用时使用testFun()来获取其返回值(当然,可能在这个函数里对testStr进行修改)。
【4】按照我找的教程,下面被注释掉的方法应该也可以,但事实上,我自己测试时,他会提示res.locals is not a function,也就是说,不能正常使用。因此我注释掉了。
【5】最后调用next(),正常执行路由(否则后面路由的代码不会被执行)。
【6】当执行render方法时,正常执行,但是在模板里,可以调用对应的变量。如果想在render里使用变量的话,那么需要这么写:
router.get('/', function (req, res, next) { //req是请求,res是回应 res.render('index', { title: res.locals.testStr }); });
【7】如果在jade模板里调用的话,只需要这么写就可以了:
h1 #{title}