ejs学习笔记（一）

为什么学习ejs

最近间间断断在学习nodejs，也尝试写小的网站，前阵子匆匆忙忙写了个UED网站，给组内同事使用，前端都是静态html，但实在写得太烂，所以也不了了之。因此下决心学习一个模板引擎，而决定学习ejs最大原因或许是它使用<% %>包裹代码吧，工作上一直使用的是asp，觉得上手会容易些也或许是由于习惯吧。本应该在本文开头分析ejs的优点，及其与其他模板引擎的对比的（如jade），但又觉得还没入门，没有太深的了解分析这些优点言之过早。

ejs基础

跟asp一样：

  • 使用<% %>包裹javascript代码段
  • 使用<%= %>添加html元素

官网上一张图很好阐释了ejs的作用：
图（1）

简单的例子

创建模板文件template.ejs

1
<thead>
<% for(var i = 0; i < heads.length; i++) {%>
  <th><%= heads[i]%></th>
<% } %>
</thead>
<tbody>
<% for(i in data) {%>
  <tr>
  <% for(j in data[i]) {%>
    <td><%= data[i][j]%></td>
  <% } %>
  </tr>
<% } %>
</tbody>

html页面中

1
<table id="table1"></table>
<script>
  var table = {
    heads: ["head1", "head2", "head3"],
    data: [
      ["row1-col1", "row1-col2", "row1-col3"],
      ["row2-col1", "row2-col2", "row2-col3"],
      ["row3-col1", "row3-col2", "row3-col3"]
    ]
  },
    template = new EJS({url: "template/note_1.ejs"}),
    html = template.render(table);
  document.getElementById("table1").innerHTML = html;
</script>

加载模板

通过以下代码创建EJS对象，默认使用缓存：

var template = new EJS({url: "/mytemplate.ejs"})

EJS构造器参数可包含以下属性：

  • url {type: string}: 通过文件模板加载
  • text {type: string}: 通过字符串加载
  • element {type: string,element}: 通过element的innerHTML或value属性加载
  • type {tyep: string}: “<”或“[”，默认是“<”；如果通过element加载，则为“[”
  • name {type: string}: 缓存的变量名，默认为element的id或url
  • cache {type: boolean}: 是否缓存，默认”true”

以上参数有几点需注意的：如果同时有url、text、element属性，优先级为element>url>text；element属性的值为字符串时为element的id，优先通过其value值(如果有的话)加载；type属性指模板里的匹配字符，模板里用<% %>包裹js代码，EJS会去匹配“<”和“>”，而如果通过element加载EJS则会匹配“[”和“]”，所以要改为用[% %]包裹代码。

渲染数据

EJS有两种方法，第一种是返回字符串

var html = template.render("data");

第二种是直接修改element的innerHTML为渲染后的内容

f = new EJS({url: '/mytemplate.ejs'}).update('my_element')
f({supplies: ['mop']})
new EJS({url: '/mytemplate.ejs'}).update('my_element', '/data.json') //Ajax请求数据
new EJS({url: '/mytemplate.ejs'}).update('my_element', {supplies: ['mop']})