模板引擎（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 src="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 就可以看到效果了，
END
