当前位置: 代码迷 >> JavaScript >> Node.js学习(14)-EJS模板发动机
  详细解决方案

Node.js学习(14)-EJS模板发动机

热度:1096   发布时间:2013-10-10 14:14:51.0
Node.js学习(14)----EJS模板引擎

这个入门教程将从以下几个方面来讲解:

1. 引入EJS

2. 创建一个模板

3. 使用视图工具组件

4. 使用错误处理组件

5. 什么情况下应使用EJS

 引入EJS

在我们正式开始前,我们先来做点准备工作。 你的页面需要引入EJS以使JavaScript能够使用它。 先到Google Code或者SVN库里下载ejs\_production.js文件。

下一步是在你的HTML文件里加入下面一段代码:

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

 创建一个模板

简化你的代码的第一步是将你的页面展现(HTML)与你的程序逻辑(JavaScript)分离开来。我们将通过创建一个template来把我们的展现代码抽取出来。 创建一个名叫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代码来控制模板的载入的渲染。 我们将用下面的代码来替换原来的字符串代码:
// load the template file, then render it with data
var html = new EJS({url: 'cleaning.ejs'}).render(data);
感觉好些了吗?这个模板还原了HTML代码的结构性,并且JavaScript代码很短也没有歧义。

 使用视图工具组件

EJS里包含了很多视图组件,视图组件是用来显示代码,如连接和表单的捷径。 就像Ruby on Rails框架里的一样,它们可以让视图代码保持短小、简单。 超级链接在我们的模板代码里也许会这样写:

<li>
    <a href='supplies/<%= supplies[i] %>'>
        <%= supplies[i] %>
    </a>
</li>
这段代码看起来仍然很乱,现在有一些内嵌的标签可以让它更小巧。我们可以使用视图组件:

<li>
    <%= link_to(supplies[i], 'supplies/'+supplies[i]) %>
</li>
上面的代码看起来更干净更直观。还记得最原始的方式吗?

html += "<li><a href='supplies/"+data.supplies[i]+"'>"
html += data.supplies[i]+"</a></li>"
与最初的JavaScript相比较,一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 现在让我们放松一下,一起来享受下令人激动的干净简洁的感觉。

 使用错误处理组件

一个好的女仆总是会承认自己的错误。如果你在EJS模板里有一个错误,EJS会给你准确地指出是哪一行有错误,只要你引入ejs_jslint.js文件,这个文件可以到\[Google Code\](http://code.google.com/p/embeddedjavascript/ "Downloading ejs_jslint.js from Google Code")里下载。如果你使用FireFox的调试工具Firebug,错误结果会直接在你的控制台里显示。

一个错误的模板代码:


<ul>
    <% foor(var i=0; i<supplies.length; i++) { %>
    <li>
        <%= link_to(supplies[i], 'supplies/'+supplies[i]) %>
    </li>
    <% } %>
</ul>

 什么情况下应使用EJS

有的人说写干净整洁的代码应该养成每天的习惯,但是我感觉EJS是一个绝佳的助手,如果你在面对以下几种情况:

1.用JavaScript创建HTML字符串 正如我们在新手教程中所讨论的,在JavaScript中拼字符串的缺点是可维护性不好。当你在JavaScript中将这些字符串拼到一起时,很难看出你正在写的HTML是什么\---|一个你页面展现的结构。而使用模板可以让你通过代码的空行和缩进来清楚地展现出你的HTML。

2.基于WebService的AJAX网站开发 EJS可以接收WebService异步传送过来的JSON格式的数据,将这种数据直接传入你的模板里,然后将结果插入到你的页面中。你所需要做的只是通过以下代码:

new EJS({url: 'comments.ejs'}).update('element_id', '/comments.json')

很简单,不是吗?

3.程序换肤功能
如果你想给用户自制页面显示的功能,EJS提供了非常适合的机制。EJS的模板只在浏览器里执行,因此对你的服务器没有任何安全风险。你可以允许你的用户上传EJS模板以及其关联的样式表,从而实现定制你的网站页面的功能。


  相关解决方案