ejs模板

现在整理ejs模板有点太old school了，而且实际使用下来感觉没有jade模板便利（纯属个人爱好），但公司有的项目中有用到ejs，日常还是需要做点维护的，因此抽个时间整理一下ejs。

• 安装与使用
• options
• 标签
• include
• 过滤器
• 自定义分隔符

安装与使用

安装TJ大神的ejs模板的安装非常简单：

npm install ejs

使用的话，先定义ejs模板：

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

用compile API加载ejs模板：

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

也可以用render API来加载ejs模板，两种方式是等价的：

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

options

无论是compile还是render都有参数options，用于指定如何加载ejs模板：

cache:true,         //是否对结果进行缓存（需要filename）
filename:"path",  //cache的key，用于include指令中
scope:"this",      //指定函数执行的上下文对象
debug:true,         //输出生成的函数体
compileDebug:false,     //为false时，debug指令不会被编译
client:"",           //返回独立的编译后的函数
open:"<%",      //指定开标签 
close:"%>",         //指定闭标签 

标签

模板的核心就是标签了，如果你用过世界上最好的语言PHP，那对这种方式一定不会陌生：

<% %>       //普通流程标签
<%= %>     //输出转义后的HTML标签。例如<div>Hello</div>输出后会变成<div>Hello</div>
<%- %>      //输出不转义的HTML标签
<%# %>     //注释标签，不会被执行，也不会被输出
-%>           //去掉后面的换行符

include

如果你定义了一段ejs模板作为公共模板，现在想引用这段公共模板的话，可以用include指令，需要在options里指定filename，否则指令不知道去哪个地方找文件。例如你有./views/users.ejs和./views/user/show.ejs。你要在users.ejs里引入show.ejs可以：

<ul>
    <% users.forEach(function(user){ %>
        <%- include('user/show', {user: user}) %>   //用<%-避免二次转义
    <% }) %>
</ul>

也可以将路径作为参数传入include指令：

<%- include(somePath) %>

过滤器

用于将结果进一步加工的API，例如ejs模板：

<p><%=: users | map:'name' | join %></p>    //注意起始的:和中间的|标记

加载该ejs模板：

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

TJ大神的ejs模板提供了以下过滤器API：

first                                    //返回数组的第一个元素
last                                      //返回数组的最后一个元素
capitalize                           //返回首字母大写的字符串
downcase                            //返回小写字符串
upcase                              //返回大写字符串
sort                                      //排序
sort_by:'prop'                     //根据指定的属性排序
size                                      //返回字符串长度
length                                 //返回数组长度
plus:n                                  //加上n，并转为Number进行运算
minus:n                              //减去n，并转为Number进行运算
times:n                               //乘以n，并转为Number进行运算
divided_by:n                          //除以n，并转为Number进行运算
join:','                                     //将数组用指定的字符合并成字符串
truncate:n                            //截取前n个字符，超过长度时，返回一个副本
truncate_words:n                  //截取字符串前n个word（word用空格分隔）
replace:pattern,substitution   //字符串替换，substitution不提供将删除匹配的子串
prepend:val                        //将val添加在字符串前面
append:val                          //将val添加在字符串后面
map:'prop'                          //返回数组中属性为prop的value组成的数组
reverse                              //反转数组或字符串
get:'prop'                            //获取属性为prop的value

自定义分隔符

恕我浅薄，实在想不出有什么应用场景。如果你对ejs默认的<% %>觉得审美疲劳，你可以自定义开闭标签，例如定义成<? ?>：

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

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

或定义成{{ }}：

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

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

总结

除了TJ大神的ejs模板，还有其他版本的ejs，都大同小异。在例如Node，Express等开源项目中都能见到ejs的身影，为前后端分离做出了很大的贡献。我个人感觉Jade更简洁易读，但也看到Web上很多人不同意这个观点，这纯属个人爱好。所以在公司的项目中，同时使用Jade和ejs ^_