現(xiàn)在整理ejs模板有點(diǎn)太old school了，而且實(shí)際使用下來(lái)感覺(jué)沒(méi)有jade模板便利（純屬個(gè)人愛(ài)好），但公司有的項(xiàng)目中有用到ejs，日常還是需要做點(diǎn)維護(hù)的，因此抽個(gè)時(shí)間整理一下ejs。

• 安裝與使用
• options
• 標(biāo)簽
• include
• 過(guò)濾器
• 自定義分隔符

安裝與使用

安裝TJ大神的ejs模板的安裝非常簡(jiǎn)單：

npm install ejs

使用的話，先定義ejs模板：

<% if (user) { %>
    <h2><%= user.name %></h2>
<% } %>

用compile API加載ejs模板：

var ejs = require('ejs');
…
var template = ejs.compile(str, options);       // compile的返回值是一個(gè)function
template(data);

也可以用render API來(lái)加載ejs模板，兩種方式是等價(jià)的：

var ejs = require('ejs');
…
ejs.render(str, data, options);     // render的返回值是最終結(jié)果string

options

無(wú)論是compile還是render都有參數(shù)options，用于指定如何加載ejs模板：

cache:true,         //是否對(duì)結(jié)果進(jìn)行緩存（需要filename）
filename:"path",  //cache的key，用于include指令中
scope:"this",      //指定函數(shù)執(zhí)行的上下文對(duì)象
debug:true,         //輸出生成的函數(shù)體
compileDebug:false,     //為false時(shí)，debug指令不會(huì)被編譯
client:"",           //返回獨(dú)立的編譯后的函數(shù)
open:"<%",      //指定開(kāi)標(biāo)簽 
close:"%>",         //指定閉標(biāo)簽 

標(biāo)簽

模板的核心就是標(biāo)簽了，如果你用過(guò)世界上最好的語(yǔ)言PHP，那對(duì)這種方式一定不會(huì)陌生：

<% %>       //普通流程標(biāo)簽
<%= %>     //輸出轉(zhuǎn)義后的HTML標(biāo)簽。例如<div>Hello</div>輸出后會(huì)變成<div>Hello</div>
<%- %>      //輸出不轉(zhuǎn)義的HTML標(biāo)簽
<%# %>     //注釋標(biāo)簽，不會(huì)被執(zhí)行，也不會(huì)被輸出
-%>           //去掉后面的換行符

include

如果你定義了一段ejs模板作為公共模板，現(xiàn)在想引用這段公共模板的話，可以用include指令，需要在options里指定filename，否則指令不知道去哪個(gè)地方找文件。例如你有./views/users.ejs和./views/user/show.ejs。你要在users.ejs里引入show.ejs可以：

<ul>
    <% users.forEach(function(user){ %>
        <%- include('user/show', {user: user}) %>   //用<%-避免二次轉(zhuǎn)義
    <% }) %>
</ul>

也可以將路徑作為參數(shù)傳入include指令：

<%- include(somePath) %>

過(guò)濾器

用于將結(jié)果進(jìn)一步加工的API，例如ejs模板：

<p><%=: users | map:'name' | join %></p>    //注意起始的:和中間的|標(biāo)記

加載該ejs模板：

ejs.render(str, {
    users: [
      { name: 'tj' },
      { name: 'mape' },
      { name: 'guillermo' }
    ]
});
// 結(jié)果是：<p>Tj, Mape, Guillermo</p>

TJ大神的ejs模板提供了以下過(guò)濾器API：

first                                    //返回?cái)?shù)組的第一個(gè)元素
last                                      //返回?cái)?shù)組的最后一個(gè)元素
capitalize                           //返回首字母大寫(xiě)的字符串
downcase                            //返回小寫(xiě)字符串
upcase                              //返回大寫(xiě)字符串
sort                                      //排序
sort_by:'prop'                     //根據(jù)指定的屬性排序
size                                      //返回字符串長(zhǎng)度
length                                 //返回?cái)?shù)組長(zhǎng)度
plus:n                                  //加上n，并轉(zhuǎn)為Number進(jìn)行運(yùn)算
minus:n                              //減去n，并轉(zhuǎn)為Number進(jìn)行運(yùn)算
times:n                               //乘以n，并轉(zhuǎn)為Number進(jìn)行運(yùn)算
divided_by:n                          //除以n，并轉(zhuǎn)為Number進(jìn)行運(yùn)算
join:','                                     //將數(shù)組用指定的字符合并成字符串
truncate:n                            //截取前n個(gè)字符，超過(guò)長(zhǎng)度時(shí)，返回一個(gè)副本
truncate_words:n                  //截取字符串前n個(gè)word（word用空格分隔）
replace:pattern,substitution   //字符串替換，substitution不提供將刪除匹配的子串
prepend:val                        //將val添加在字符串前面
append:val                          //將val添加在字符串后面
map:'prop'                          //返回?cái)?shù)組中屬性為prop的value組成的數(shù)組
reverse                              //反轉(zhuǎn)數(shù)組或字符串
get:'prop'                            //獲取屬性為prop的value

自定義分隔符

恕我淺薄，實(shí)在想不出有什么應(yīng)用場(chǎng)景。如果你對(duì)ejs默認(rèn)的<% %>覺(jué)得審美疲勞，你可以自定義開(kāi)閉標(biāo)簽，例如定義成<? ?>：

ejs.open = '<?';
ejs.close = '?>';

<h1><?= title ?></h1>

或定義成{{ }}：

ejs.open = '{{';
ejs.close = '}}';

<h1>{{= title }}</h1>

總結(jié)

除了TJ大神的ejs模板，還有其他版本的ejs，都大同小異。在例如Node，Express等開(kāi)源項(xiàng)目中都能見(jiàn)到ejs的身影，為前后端分離做出了很大的貢獻(xiàn)。我個(gè)人感覺(jué)Jade更簡(jiǎn)潔易讀，但也看到Web上很多人不同意這個(gè)觀點(diǎn)，這純屬個(gè)人愛(ài)好。所以在公司的項(xiàng)目中，同時(shí)使用Jade和ejs ^_