ejs母版页让你的node.js应用开发更快更有效- 一介布衣
引子:
母版页之方便之处相信做过web开发的都不用说太多,可以重复利用资源,维护方便,开发起来你只需关注当前页变动的东西,固定不变的全部放到母版页,可以理解为前人栽树后人乘凉,省时,省力,省心.下面围绕2点简单说下.
一.node.js开发,基于ejs引擎的母版页
二.前提环境 ,如何使用及示例介绍
就像上面的这个图,如果你的业务说覆盖的页面只有中间是变化的,那么其他部分完全可以放到母版页中呈现.
node.js 下的web应用开发有2种模板引擎 ejs 和 jade ,当然你可能直接用jquery 的前端模板后端ajax请求数据等等....(也算一种吧)
ejs 下如何使用母版页?
ejs的母版页功能支持需要依赖一个第三方包 ejs-mate 可以根据npm install ejs-mate 直接安装 Express 需要4.0以上
安装后使用方法如下:
var app = express();
app.set('view engine', 'html');
app.engine('html', require('ejs-mate'));
app.locals._layoutFile = 'layout.html';上面指定ejs引擎渲染html 文件,接着指定使用 ejs-mate 做母版页引擎,最后指定 母版页是 layout.html
这里有个 app.locals 这个变量,提一句,可以把 locals 理解成客户端的一个全局变量,我们现在给变量的_alyoutFile 属性赋值 'layout.html'
这样在后端指定母版页的好处是,你不需要在view中的html页面里特定指定谁是你的母版页.
如果上面最后一句你不写,需要在前端每个页面指定渲染的母版页,假设 index.ejs 套用母版页前代码如下:
<% layout('layout.html') -%>
<span>Hello World!</span>如果你的母版页是这样的:
<!DOCTYPE html> <html> <head> <title>It's title</title> </head> <body> <section> <%-body -%> </section> </body> </html>
上面的<%-body %> 就是每个页面的变体,就是你要专心关注的东西.
上面的 index.ejs 套用母版页之后渲染出的html如下:
<!DOCTYPE html> <html> <head> <title>It's title</title> </head> <body> <section> <span>Hello World!</span> </section> </body> </html>
可以看出来 上面index.ejs 里的全部代码 (除去母版页引用声明代码 <% layout('layout.html') -%> ) 都填充到了母版页的 <%-body %>处.
到这里就简单的介绍完了node.js下ejs引擎的母版页使用方法,简单好用,提高效率- 一介布衣