ejs学习

谁践踏了优雅 2022-10-02 09:47 136阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

什么是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 内容如下：

*  使用模板：

// 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_canjs.com_guides_EJS.html]

[中文：http://blog.csdn.net/fyddaben/article/details/8697648][http_canjs.com_guides_EJS.html]

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

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 <b>blink</b>.</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][http_my.oschina.net_u_1540325_blog_311901]

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

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/fea5541b956f470f96805c07ad60f956.png
[Google Code]: https://code.google.com/p/embeddedjavascript/
[http_canjs.com_guides_EJS.html]: http://canjs.com/guides/EJS.html
[http_my.oschina.net_u_1540325_blog_311901]: http://my.oschina.net/u/1540325/blog/311901