Express学习-模板引擎（Template Engine）
模板引擎（Template Engine）, 是用来解析对应类型模板文件然后动态生成由数据和静态页面组成的视图文件的一个工具。 它通过标签(tag)来响应各种解析动作，通过变量占位的方式动态的将对应数据展示到指定位置。
在 express web框架中，ejs 和jade都有很好的集成支持。在express中，在模板引擎使用上大多数应该都会偏向于ejs吧，ejs在代码编写上更直观，更易于理解，让开发者更多的专注于数据处理，而jade将html和数据处理揉杂在了一起，而且语法也比较怪异，看起来。 我比较喜欢ejs。 -_-#
ejs
ejs，它是一个开源的javaScript模板库或工具，ejs将数据和模板整合最终生成html文件，ejs使用起来相比jade要简单很多，语法非常像在jsp中使用 EL表达式($)动态处理数据。在html中，使用ejs动态输出数据看起来像这样:
var o = {tag1:'hello,ejs'} ;<p> <%= o.tag1 %></p>
输出到页面是这样的 :
<p>hello,ejs</p>
在jsp中使用EL表达式$同样也是对象.属性获取数据。这让我过度非常的容易。这也许是我更喜欢ejs的原因吧。
ejs 也可以独立于 express 框架使用，比如直接在html页面中引入就像jquery一样使用，如:
<div id="output"></div><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ejs.min.js"></script><script>
var people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people}); // With jQuery:
$('#output').html(html); // Vanilla JS:
document.getElementById('output').innerHTML = html;</script>去这里下载./ejs.js 或者./ejs.min.js, 这种方式在jsp页面需要动态的生成公用的类似表格的页面的时候非常有用！
ejs使用
ejs 安装
npm install ejs ## npm i ejs --i 是 install的别名
在express中使用
//设置模板引擎为ejs
app.set('view engine','ejs') ; //app = express() ;
//设置模板文件位置 => 项目根路径下views目录为模板文件存放目录
app.set('views', __dirname + '/views') ;render函数
在express框架中使用ejs.render(dataAndOptions)就可以由一个模板文件生成静态html文件，并将数据嵌入到html文件中，这个函数有如下参数:ejs模板文件名
动态数据
渲染个性化参数 -例如模板文件缓存，函数执行环境，打开debug模式等
如：
app.get('/',function(req,res) {
res.render('index',{ name:'ejs case'
}) ;
}) ;index 表示模板目录下的index.ejs文件，这个文件看起来像这样:
<!DOCTYPE html><html> <head><title>ejs example</title></head> <body> <h1><%= name %></h1> </body></html>
html中的css 什么的，都不需要关心，静态页面是什么样，在index.ejs中还是什么样，甚至，不懂html语法都可以，只需要知道在哪儿插入有效的ejs #tag就可以了，真的很方便。
ejs 标签ejs #Tags是ejs动态处理数据的重要工具，通过不同的标签，ejs将生成不同类型的html元素，方便浏览器等客户端正确解析html文件。ejs目前共有如下标签支持:
<% 'Scriptlet' tag, for control-flow, no output
<%_ 'Whitespace Slurping' Scriptlet tag, strips all whitespace before it
<%= Outputs the value into the template (escaped)
<%- Outputs the unescaped value into the template
<%# Comment tag, no execution, no output
<%% Outputs a literal '<%'
%%> Outputs a literal '%>'
%> Plain ending tag
-%> Trim-mode ('newline slurp') tag, trims following newline
_%> 'Whitespace Slurping' ending tag, removes all whitespace after it
这些标签一般情况下是以%>结束的，但是也可以使用别的标签结束,例如最后两个就是用来做特殊处理的结束标签。-%> 、_%>
这些标签看起来，很像在jsp编写java代码使用的标签，也像JSTL标签，因为ejs#Tags支持javaScript执行，和jsp中的<% System.out.print("hello")%> 一样。ejs使用<%来执行标签内的js代码，更多标签文档在这里。
和jsp一样，ejs也支持include, 来达到页面服用的目的，例如，大多数网站的首页展示的东西都比较多，特殊要求也越来越多，页面变更相对也是最频繁的，所以，一般这种首页都会有最少三部分组成： head.html 、body.html 、foote.html 通过这种方式，不仅能达到页面复用的目的，还可以分开维护，是首页能更加灵活的多样化展示，也是首页更加稳定。不会因为某一块的变更导致另一块也需要跟着变化。
在ejs中使用标签<%- include('head') %>来将head.ejs文件引入。 如:
//head.ejs<!DOCTYPE html><html> <head> <title>ejs example</title> </head>
//body.ejs <body> <h1><%= name %></h1> <p>hello, <%= name %></p> </body>
//foote<div style="height:2px;border-bottom:1px #ccc solid;"></div></html>
<%- include('head') %>
<%- include('body',{name:'ejs'}) %>
<%- include('foote') %>这样，通过include引入，功能上一模一样，结构明显更加清晰了，而且模板复用不能再爽了。
jade
jade 是一个非常强大的模板引擎，有别与传统的模板技术，jade可以实现模板继承，据说同时性能还很强，jade粉随处可见，但是她风骚的语法和代码风格，我一直不敢尝试去爱，可能是因为我的要求很低，我只是需要一个可以填充数据的东东就可以了，有ejs已经足够了。 #-_-
有比较多的语言都有jade的实现，来实现前后端统一渲染，例如:
java
php
python
ruby
scala
我记得之前遇到过,github上也有类似开源项目，例如jade4j。
jade 风骚的语法支持简介
在我看来，jade语法看起来有点像Markdown, 如:
html
会被解析为
<html></html>
又有一点像jQuery,如:
div#container
会被解析为
<div id="container"></div>
如添加class语法:
div.user-details
解析结果为
<div class="user-details"></div>
使用jade编写的模板长这样的:
html
head
title Example
script if (foo) {
bar();
} else {
baz();
}看着这样，总感觉别扭，都只有一半，特别想去给他补完整，有木有，像我这种强迫症重症患者如何能忍。
所以，我看了一点语法就放弃了，jade语法体系庞大，他似乎是专门为html定制的，html有的元素他都有对应的标签，html没有的元素，他也有对应的标签处理。ejs跟他相比，确实很弱，但是jade的学习成本也很可观。而且，用好也不是那么容易的。 我个人觉得，ejs才是正确的选择，很多时候静态html和动态数据处理真的应该分开，动态数据处理基本都是后端猿/媛，对html的了解大多不可能赶得上前端大婶，所以让一个业余的人来干正儿八经的事，想想都知道是什么结果了，只能是专业坑队友了。
有这想法，一方面也是因为我对jade不懂，路过的大神，请轻拍！ @^_^@
在express中使用ejs*
一个简单的通过ejs模板输出的栗子:
新建一个项目目录，进入安装
express、ejs支持:
mkdir express-ejs && cd express-ejs
安装
express和ejs
npm i express
检查express安装成功后安装ejs
npm i ejs
同样检查node_modules目录中是否有ejs目录。
然后新建路由目录和模板文件存放目录
mkdir {routers,views}##routers 是业务路由js文件存放目录，views是模板文件存放目录然后新建一个入口函数文件 - app.js
然后整个项目目录是这个样子:
/express/express-ejs>$ ls app.js node_modules routes views
然后在routers目录下新建index.js用来处理首页访问(这个栗子只是首页处理)，如:
var express = require('express') ;var route = express.Router() ;
route.get('/',function(req,res) { //
// res.send('hello ,ejs.') ;
res.render('index',{o:{ name:'ejs case', content:'ejs'
}}) ;
}) ;
route.use(function(req,res) {
res.send('404 miss route.') ;
}) ;module.exports =route ;然后在app.js中设置模板引擎、模板文件位置、路由设置、服务启动,如:
var express = require('express') ;var app = express() ;var index = require('./routes/index') ;
app.set('views', __dirname + '/views') ;
app.set('view engine','ejs') ;
app.use('/',index) ;
app.listen(8080,function() { console.log('server has started......') ;
}) ;然后是ejs模板文件(在/views目录下),这里采用了include方式:
//head.ejs<!DOCTYPE html><html> <head> <title><%= title %></title> </head>
//body.ejs <body> <h1><%= o.name %></h1> <p>hello, <%= o.content %></p> </body>
//foote.ejs<div style="height:2px;border-bottom:1px #ccc solid;"></div></html>
//index.ejs<%- include('head',{title:'ejs example'}) %>
<%- include('body') %>
<%- include('foote') %>然后运行node命令启动服务，访问http://localhost:8080 就可以看到效果了，
ejs-demo.png
END
作者：_palm
链接：https://www.jianshu.com/p/021fdfe1b8d6
共同学习，写下你的评论
评论加载中...
作者其他优质文章
