August 21, 2017

EJS 入门简介

EJS（Embedded JavaScript）是一种客户端的模板语言，通过把数据和模板结合起来去生成 HTML，下面给出一个简单介绍 EJS 的实例。

DEMO

1. 原始 JSON 数据

{
  title:    'The Games List',
  game:     ['GTA5', 'Titan Fall', 'Zelda']	
}

2. 模板

对于 EJS ，在 <% 与 %>之间的 JavaScript 会被执行，而<%= 和 %>之间的 JavaScript 会把 HTML 添加到生成的结果中。

<h1><%= title %></h1>
<ul>
<% for(var i = 0; i < supplies.length; i++) {%>
  <li><%= supplies[i] %></li>
<% } %>
</ul>

3. 结果

<h1>The Games List</li>
<ul>
	<li>GTA5</li>
	<li>Titan Fall</li>
	<li>Zelda</li>
</ul>

上面是 < 模板 + 数据 > 后生成的 HTML 代码，在浏览器中显示的结果就是：

The Games List

GTA5
Titan Fall
Zelda

以上是 EJS 的入门 DEMO，下面阐述一下如何更深入地使用 EJS。

EJS 简单教程

1. 引入 EJS

我们的页面需要引入 EJS，这样 JavaScript 才能使用它，所以需要先下载 ejs_production.js，然后在 HTML 中插入 EJS：

1	<script type="text/javascript" src="ejs_production.js"></script>

2. 创建一个模板

要想将代码变得更简洁，第一步就是将 HTML 从 JavaScript 中分离开来。所以就需要把 HTML 抽离出来，放进单独的模板文件中。现在先创建个文件，命名为 cleaning.ejs，并插入以下代码：

<h1><%= title %></h1>
<ul>
  <% for(var i=0; i < supplies.length; i++) { %>
    <li>
      <a href='supplies/<%= supplies[i] %>'>
        <%= supplies[i] %>
      </a>
    <li>
  <% } %>
</ul>

你会注意到在<% %>两个标签里的代码都会被执行，并且<%= %>两标签之间的代码都将自己插入了被返回的 HTML 中。

我们需要添加 JavaScript 脚本来控制模板的加载和渲染，且将原始的涉及到字符串的代码用以下代码代替：

1 2	// load the template file, then render it with data var html = new EJS({url: 'cleaning.js'}).render(data);

现在，模板代码将 HTML 存储在其准备好的结构中，使得 JavaScript 代码变得短小精悍。

3. 视图助手 - View Helper

EJS 是使用 view helpers 来打包。view helper 是常用的视图代码的快捷方式，像链接和表单，使试图代码保持简单短小。

我们模板里的链接由类似于字符串的形式来构建：

<li>
  <a href='supplies/<%= supplies[i] %>'>
    <%= supplies[i] %>
  </a>
</li>

上面的这段代码还是有点混乱，尤其是那么多嵌套的标签实在让人头昏眼花，所以接下来就可以用视图助手让代码变得轻量。

1
2
3

<li>
  <%= link_to(supplies[i], 'supplies/'+supplies[i]) %>  
</li>

现在代码就更简单明了了，还记不记得构建的链接是什么样的？

1 2	html += "<li><a href='supplies/"+data.supplies[i]+">" html += data.supplies[i]+"</a></li>

于之前的 JavaScript 代码进行比对，不了解你所写代码的人也能很快地理解上面的 EJS 模板片段。

4. 错误处理

如果在你写的 EJS 模板中有错误，EJS 将指出错误发生的确切行号，只要将 ejs_jslint.js 引入项目中。当然，这些错误可以使用 Chrome 的调试器查看。

5. 何时使用 EJS 来整理代码？

用 JavaScript 来构建 HTML
使用 AJAX 的 web 服务
可换肤的应用

Matrix Wall