ejs教程

一、什么是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的应用场所

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

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

  1. new
 EJS({url: 
'comments.ejs'
}).update(
'element_id'
, 
'/comments.json'
)
  1. 程序换肤功能
    如果你想给用户自制页面显示的功能,EJS提供了非常适合的机制。EJS的模板只在浏览器里执行,因此对你的服务器没有任何安全风险。你可以允许你的用户上传EJS模板以及其关联的样式表,从而实现定制你的网站页面的功能。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容