Node.js学习(14)----EJS模板引擎

这个入门教程将从如下几个方面来说解：

1. 引入EJS

2. 建立一个模板

3. 使用视图工具组件

4. 使用错误处理组件

5. 什么状况下应使用EJS

 

 引入EJS

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

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

<scripttype="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 datavar 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模板以及其关联的样式表，从而实现定制你的网站页面的功能。