EJS入门
今天学习了EJS，转个再点个赞，动态创网页的好方法！
转自：http://www.csser.com/board/4fddc4f0b28ed7d857001674
你曾经遇到过像下面这样一团糟的代码吗：
var html ="<h1>"+data.title+"</h1>" html +="<ul>"for(var i=0; i<data.supplies.length; i++){ html +="<li><a href=‘supplies/"+data.supplies[i]+"‘>" html += data.supplies[i]+"</a></li>"} html +="</ul>"
如果你是一个网站开发者，答案也许是Yes. 不仅代码丑陋，而且你的HTML结构完全在JavaScript代码中丢失了。那我们要怎么让它变得整洁呢？ 在这个入门教程中，将会告诉你怎样改进以上代码。 我们将使用EJS来找回你的明确、维护性良好的HTML代码结构。 EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。直截了当地说，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>
Firebug的控制台界面：
什么情况下应使用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模板以及其关联的样式表，从而实现定制你的网站页面的功能。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
