ejs学习

最新推荐文章于 2021-07-08 16:10:51 发布

weixin_34357928

最新推荐文章于 2021-07-08 16:10:51 发布

阅读量100

点赞数

原文链接：https://my.oschina.net/lvhuizhenblog/blog/312175

版权

2019独角兽企业重金招聘Python工程师标准>>>

什么是EJS？

EJS是JavaScript模板库，用来从JSON数据中生成HTML字符串。

为什么使用EJS？

因为EJS 还原了HTML代码的结构性，与最初的JavaScript相比较，一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。

如何使用EJS?

首先在在head中包含ejs.js库，如下：

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

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

<script type="text/javascript" src="ejs_production.js"></script>
然后创建一个模板，文件名为：cleaning.ejs 内容如下：

<table>
    <tr>
        <%for(var i in person[0]) {%>
            <th><%=i %></th>
        <%}%>
    </tr>
 
    <%for(var j= 0; j < person.length; j++) { %>
        <tr>
            <%for(var attribute in person[j]) {%>
                    <td><%= person[j][attribute] %></td>
            <%}%>
        </tr>
    <%}%>
 
</table>

使用模板：

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

完整的例子：http://my.oschina.net/lvhuizhenblog/blog/312174

基本语法：

语法的文章：英文http://canjs.com/guides/EJS.html

中文：http://blog.csdn.net/fyddaben/article/details/8697648

对此进行一个简单的翻译：

Magic tags

在EJS中共使用五种类型的magic tags。

在<% %>里面将执行任何JavaScript代码。这个标签不修改或者填充模板，但在EJS模板里的循环，if/else语句，switch语句和变量声明的javaScript代码使用它来执行。javaScript代码放在<%%>里面。

如下：<%code%>

<% if(todos.attr('length') > 0) { %>
    <div>You have no to-dos.</div>
<% } else { %>
    <ul>
        <% todos.each(function(todo) { %>
        <li><%= todo.attr('description') %></li>
        <% }); %>
    </ul>
<% } %>

<%= %>:当在模板中写值时通常是使用这个标签，但是它会将转码后的值填充到模板中，如下：

<div>My favorite element is <%= '<b>blink</b>' %>.</div>

在HTML中的结果将是这个样子：

<div>My favorite element is &lt;b&gt;blink&lt;/b&gt;.</div>

<%== %> 这个标签是写原始的结果到模板中，像<%= %>但是并不转码，一般用于在模板中包含其他模板。

如下：

<div>My favorite element is <%== '<b>blink</b>' %>.</div>

在HTML中的结构将是这个样子：

<div>My favorite element is <b>blink</b>.</div>

其他标签不经常使用，在此不作介绍了。

什么情况下应使用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模板以及其关联的样式表，从而实现定制你的网站页面的功能。

基本介绍:

http://my.oschina.net/u/1540325/blog/311901

转载于:https://my.oschina.net/lvhuizhenblog/blog/312175