概述
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。这样对结构重用有很大的益处。