一、什么是EJS

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

二、为什么要使用EJS

与最初的JavaScript相比较,一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下,一起来享受下令人激动的干净简洁的感觉。

总之可以让代码更加干净整洁,让人易懂。

可以看如下的例子:

这是用javascript实现的代码

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>"

最终要实现的效果如下

但是上面的代码看起来很乱,虽然实现了功能,但是不容易让人弄懂。不仅代码丑陋,而且你的HTML结构完全在JavaScript代码中丢失。

下面学习EJS同样实现上面的功效,它的工作原理如下:

使用EJS来找回你的明确、维护性良好的HTML代码结构。

注:data是json对象,不能使json字符串。

在HTML中引入EJS,以使javascript能够使用它,引入EJS的语句如下:

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

创建一个EJS模板,命名为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文档如下,引入EJS,并更加我们的提供EJS模板创建EJS对象,然后调用EJS对象成员函数解析JSON对象到模板中。

< html > < head > < script  type = "text/javascript"  src = "/js/ejs.js" ></ script >< script  type = "text/javascript" >   function myfunction(){var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'     var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));     //JSON.parse(data) 把JSON字符串解析为原生的javascript值。      alert(html);     document.getElementById("div1").innerHTML=html; } </ script > </ head > < body > <button  onclick = "myfunction()" >点击</ button > < div  id = "div1" ></ div > </ body> < html >

从上面这个例子我们可以看到EJS模板的基本用法。

三、下面介绍下EJS的语法和功能:

1、缓存功能,能够缓存已经解析好的html模版;

2、<% code %>用于执行其中javascript代码。

<% alert('hello world') %>

3、<%= code %>会对code进行html转义;

<h1><%=title %></h1>                    注:会把title里面存的值给显示出来在h1中。 <p><%= 'hello world'  %></p>             注:会把hello world显示在h1中。 <h1><%=  '<b>hello world</b>' %></h1>    注:会把hello world变粗,然后显示在h1中。 <h1><%=title %></h1>                    注:会把title里面存的值给显示出来在h1中。 <p><%=  'hello world'  %></p>             注:会把hello world显示在h1中。 <h1><%=  '<b>hello world</b>'  %></h1>    注:会把hello world变粗,然后显示在h1中。

4、<%- code %>将不会进行转义;,这一行代码不会执行,像是被注释了一样,然后显示原来的html。也不会影响整个页面的执行。

<h1><%-title %>asd</h1>          最后显示asd,及显示原网页 <p><% # 'hello world' %>asd</p>   最后显示asd,及显示原网页

5、支持自定义标签,比如'<%'可以使用'{{','%>'用'}}'代替;

ejs 里,默认的闭合标记是 <%  .. %>,我们也可以定义自己的标签。例如:

app.set("view options",{                                                                                  
   "open":"{{",                                                                                  
   "close":"}}"
});

6、提供一些辅助函数,用于模版中使用 
     1)、first,返回数组的第一个元素; 
     2)、last,返回数组的最后一个元素; 
     3)、capitalize,返回首字母大写的字符串; 
     4)、downcase,返回字符串的小写; 
     5)、upcase,返回字符串的大写; 
     6)、sort,排序(Object.create(obj).sort()?); 
     7)、sort_by:'prop',按照指定的prop属性进行升序排序; 
     8)、size,返回长度,即length属性,不一定非是数组才行; 
     9)、plus:n,加上n,将转化为Number进行运算; 
     10)、minus:n,减去n,将转化为Number进行运算; 
     11)、times:n,乘以n,将转化为Number进行运算; 
    12)、divided_by:n,除以n,将转化为Number进行运算; 
    13)、join:'val',将数组用'val'最为分隔符,进行合并成一个字符串; 
    14)、truncate:n,截取前n个字符,超过长度时,将返回一个副本 
    15)、truncate_words:n,取得字符串中的前n个word,word以空格进行分割; 
    16)、replace:pattern,substitution,字符串替换,substitution不提供将删除匹配的子串; 
    17)、prepend:val,如果操作数为数组,则进行合并;为字符串则添加val在前面; 
    18)、append:val,如果操作数为数组,则进行合并;为字符串则添加val在后面; 
    19)、map:'prop',返回对象数组中属性为prop的值组成的数组; 
    20)、reverse,翻转数组或字符串; 
    21)、get:'prop',取得属性为'prop'的值; 
    22)、json,转化为json格式字符串

7、利用<%- include filename %>加载其他页面模版;

四、使用创建好的EJS模板

基于我们之前写的模拟生成一个EJS对象

new EJS({url: '/js/tmpl/cleaning.ejs'})

对象有下面两个成员函数

1、ejs.compile(str, options); 将返回内部解析好的Function函数 
    2、ejs.render(str, options); 返回经过解析的字符串

ejs的render函数有两个参数 第一个是字符串,第二个是可选的对象,和其他javascript模版一样需要渲染的数据也是包含在option对象中的。

ejs.render(str,option);   // 渲染字符串 str 一般是通过nodejs文件系统的readfile方法读取     ejs.render(str,{        data : user_data   // 需要渲染的数据      });

其中options的一些参数为: 
    1、cache:是否缓存解析后的模版,需要filename作为key; 
    2、filename:模版文件名; 
    3、scope:complile后的Function执行所在的上下文环境; 
    4、debug:标识是否是debeg状态,debug为true则会输出生成的Function内容; 
    5、compileDebug:标识是否是编译debug,为true则会生成解析过程中的跟踪信息,用于调试; 
    6、client,标识是否用于浏览器客户端运行,为true则返回解析后的可以单独运行的Function函数; 
    7、open,代码开头标记,默认为'<%'; 
    8、close,代码结束标记,默认为'%>'; 
    9、其他的一些用于解析模版时提供的变量。 
    在express中使用时,options参数将由response.render进行传入,其中包含了一些express中的设置,以及用户提供的变量值。

五、最后总结一下EJS的应用场所

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

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

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

4. 程序换肤功能

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

EJS 是什么 ,怎么用,以及优点的更多相关文章

  1. 集成ejs和angular

    我们也有一个系统angular用在应用中单页.正确angular做一些定制.集成seajs.不实用angular自己的模块管理. 只要angular也可单独使用在,一个较小的系统新开发,我不会用前js ...

  2. 数据库课程设计:SQL Server + Express + node.js + ejs 论坛管理系统

    前言 这是一篇对数据库课程设计的总结,这不是教程也不是指导,只是我的经验之谈,其中可能有许多错误,请小心,不要被误导.祝愿你看了这篇文章后能做出更好的设计. 我对web开发并不熟悉,而我们的课程设计只 ...

  3. Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888

    Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888 用户名admin  密码aaaaaa 网络摄像机是一种结合传统摄像机与网络技术所产生的新一代摄像机,它可以将影像通过网络传 ...

  4. ajax优点与缺点

    ajax的优点 Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点: 1.最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好. 2.使用异步方式与服务器通信,不需要打 ...

  5. Web APi 2.0优点和特点?在Web APi中如何启动Session状态?

    前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...

  6. nodejs 返回html页面--使用 ejs 模板

    nodejs 可以直接在返回中使用html标签,例如下面的格式,返回 hello world 将会使用 h1 字体. app.get('/html',function(req,res){ res.st ...

  7. 【nodejs笔记3】Express基本用法,和路由控制,和模板渲染ejs

    1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', ...

  8. 《C#高级编程(第六版)》泛型学习笔记(一):泛型优点和特性 (转载)

    原文出处:http://www.cnblogs.com/xun126/archive/2011/01/13/1933838.html 泛型是CLR 2.0的一个新特性,在CLR 1.0中,要创建一个灵 ...

  9. spring+IOC+DI+AOP优点分析(一)

    Spring是什么: Spring是一个轻量级的DI和AOP容器框架. 说它轻量级有一大部分原因是相对与EJB的(虽然本人从没有接触过EJB的应用),重要的是,Spring是非侵入式的,基于sprin ...

随机推荐

  1. SpringMVC 基于注解的Controller详解

    本文出处 http://blog.csdn.net/lufeng20/article/details/7598801 概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Spri ...

  2. 转:Windows Socket五种I/O模型

    原文转自:  Windows Socket五种I/O模型 Winsock 的I/O操作: 1. 两种I/O模式 阻塞模式:执行I/O操作完成前会一直进行等待,不会将控制权交给程序.套接字 默认为阻塞模 ...

  3. 流媒体学习一-------mediastreamer2 的简介

    Mediastreamer2 是一个功能强大且小巧的流引擎,专门为音视频电话应用而开发.这个库为linphone中所有的接收.发送多媒体流提供处理,包括音/视频捕获,编码和解码,渲染. 特性: 接收. ...

  4. MVC分页控件之二,为IQueryable定义一个扩展方法,直接反回PagedList<T>结果集(转)

    namespace Entity { public interface IPagedList { /// <summary> /// 记录数 /// </summary> in ...

  5. 转:ASP.NET MVC + EF 更新的几种方式

    1.常用 db.Entry(实体).State = EntityState.Modified;db.SaveChanges(); 2.指定更新 db.Configuration.ValidateOnS ...

  6. Sparse Graph---hdu5876(set+bfs+补图求最短路)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5876 题意:有一个含有n个点的无向图,已知图的补图含有m条边u, v:求在原图中,起点s到 ...

  7. github Mac端的使用案例

    1. 本地有一个仓库,是和网页版的github连接在一起的,平时用Terminal来控制的,怎么放在github的客户端呢? 解决办法: 1.1 点击左上角的+ 号,在弹出框中选择Add,然后choo ...

  8. django GET POST

    django需要读取客户端get和post请求的值.读取处理方法和异常记录于此. 参考链接: http://stackoverflow.com/questions/12518517/request-p ...

  9. FPGA最小系统分析与电路设计

    <FPGA最小系统分析与电路设计> 部分节选自<FPGA应用开发入门与典型.pdf > FPGA最小系统包括:FPGA芯片.下载电路.外部时钟.复位电路和电源. 如果使用NIO ...

  10. iOS 使用XCode6打开项目以后再用XCode5出现的问题fatal error: malformed or corrupted AST file: 'Unable to load module

    使用不同版本的XCode出现的问题: fatal error: malformed or corrupted AST file: 'Unable to load module "/Users ...