概述
ejs模版是我比较喜欢而且常用的模版引擎，一方面它的语法和java中的velocity相似，另一位方面完全把视图解耦出来，性能也比较出色，所以成为我模版选型的不二之选。
核心概念
我们先从一个简单的示例来看看ejs模版的用法吧。ejs模版的核心分别是模版、数据、和渲染。对应的代码分别如下：
数据
var data = { title: "ejs模版测试" }; ejs模版使用的数据是标准的javascript对象，曾经视图传一个数组进去，但是渲染不出来。所以我们最好传一个Object对象给ejs模版引擎。
模版(view/title.ejs)
<h1 id="title"><%= title %></h1> 模版是一个单独的ejs格式的文件，虽然这不是强制性的，但是结构一下清晰明了。模版里有它特殊的语法。比如：<%= title %>的作用就是显示数据传递过来的title字段。
渲染
var temp = new EJS({ url : "view/title.ejs" }).render(data); ejs是通过调用render方法把数据传入模版引擎的。这也是连接数据与模版的桥梁。
完整的示例代码如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ejs模版测试</title> <script type="text/javascript" src="lib/ejs.js"></script> <!--引入ejs核心文件--> </head> <body> <h1 id="title"></h1> <script> //模版需要用到的数据 var data = { title: "ejs模版测试" }; var title = document.getElementById('title'); //模版渲染 title.innerHTML = new EJS({ url : "view/title.ejs" //模版的地址 }).render(data); </script> </body> </html> 模版语法
简单的输出
<%= title %> //输出数据中title中对应的值的内容 循环
{ title: 'Cleaning Supplies' supplies: ['mop', 'broom', 'duster'] } <% for(var i=0; i<supplies.length; i++) {%> <li><%= supplies[i] %></li> <% } %> 判断
<% if ( defaultindex == "select") { %> <li class="active" %>"></li> <% } else { %> //这里不能分开写 <li></li> <% } %> 以上几种语法基本可以应付常用的结构了，当然我们还可以拓展。它向我们平常写脚本一样，只不过我们要主要不要出错。
核心API
render
/*第一次渲染的时候调用该方法,返回值是被数据填充的模版*/ html = new EJS({url: '/template.ejs'}).render(data) update
/*当数据有更新的时候，调用update方法*/ new EJS({url: '/template.ejs'}).update(document.body, data2) 拓展(view.js)
EJS官网除了提供其核心功能外，还提供了常用的标签的封装。
示例如下：
/*link_to封装了`a`标签*/ <ul> <% for(var i=0; i<supplies.length; i++) {%> <li><%= link_to(supplies[i], 'supplies/'+supplies[i]) %></li> <% } %> </ul> /*img_tag封装了img标签*/ <%= img_tag('images/maid.png') %> 高级特性
模版缓存
为了最大提高模版的性能，默认是开启了缓存的，所以遇到下面的代码,content.ejs模版只会被加载一次.
<script type='text/javascript'> new EJS({url: 'templates/content.ejs'}).update('content1', {}); new EJS({url: 'templates/content.ejs'}).update('content2', {}); </script> 当然我们可以手动关闭缓存:
EJS.config({cache: false}); 这样的话，如果遇到上面的代码，content.ejs会被加载两次。
模版嵌套
模版可以嵌套：示例如下：
<h2>This is from the containing template</h2> <div class='template'> <%= this.partial({url: 'templates/partial.ejs'}) %> </div> 该模版中包含一个子模版partial.ejs。这样对结构重用有很大的益处。