EJS 什么是EJS后缀文件 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来找回你的明确、维护性良好的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格式的数据,将这种数据直接传入你的模板里,然后将结果插入到你的页面中。你所需要做的只是通过以下代码:
3. new
EJS({url:
'comments.ejs'
}).update(
'element_id'
,
'/comments.json'
)
4.
程序换肤功能
如果你想给用户自制页面显示的功能,EJS提供了非常适合的机制。EJS的模板只在浏览器里执行,因此对你的服务器没有任何安全风险。你可以允许你的用户上传EJS模板以及其关联的样式表,从而实现定制你的网站页面的功能。
EJS 什么是EJS后缀文件 EJS怎么用相关推荐
- 【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面
最近在做官网,首先想到用这个EJS,有句话怎么说的,万物都可以ejs,是吧! 1.ejs特点: 快速编译和渲染 简单的模板标签 自定义标记分隔符 支持文本包含 支持浏览器端和服务器端 模板静态缓存 支 ...
- linux shell rm 删除子目录下 所有.o后缀文件
原理:通过管道命令来操作,先find出主目录 下想删除的文件,然后通过"xargs"这个构造参数列表并运行命令. 实例1:删除当前目录 包括当前目录的子目录下 所有 后缀是 o ...
- ModelFileType:XML、Hdf5、dat等不同模型文件后缀文件的简介、使用方法之详细攻略
ModelFileType:XML.Hdf5.dat等不同模型文件后缀文件的简介.使用方法之详细攻略 目录 一.XML文件 XML简介 XML使用方法 二.HDF5文件 HDF5简介 HDF5常见文件
- python合并ts视频_python爬取视频网站m3u8视频,下载.ts后缀文件,合并成整视频
最近发现一些网站,可以解析各大视频网站的vip.仔细想了想,这也算是爬虫呀,爬的是视频数据. 首先选取一个视频网站,我选的是 影视大全 ,然后选择上映不久的电影 "一出好戏" . ...
- python 去掉文件后缀_python从zip中删除指定后缀文件(推荐)
一,说明 环境:python2 用到的模块 os zipfile shutil 程序功能:从zip中删除指定后缀的文件,然后再自动压缩 函数说明: DelFileInZip(path,suffix) ...
- php 显示html文件后缀,[求助]此jQuery在html后缀文件可用,在php后缀文件就用不了!...
PHP jQuery HTML 新手菜鸟想请教下各位高人,为什么这个页面在html后缀文件可用,在php后缀文件就用不了呢? 无标题文档function loadCiphpImage(){var $ ...
- livp后缀文件图片怎么打开,在电脑怎么打开live照片批量转换?
livp后缀文件图片怎么打开,在电脑怎么打开live照片批量转换? 整理百度网盘上自动备份的照片,打算作为发文的素材,在百度网盘客户端上照片都可以正常浏览,然而,下载到本地电脑后,发现文件的后缀为li ...
- 针对顽固dll后缀文件删除
从网上查了好多都,要么要用管理员身份开CMD,要么要结束explorer.exe然后再删除.作为一个手残党,我尝试并没有成功. 然后,从网上找到一个简单粗暴的方式: 把要删除的dll后缀文件的后缀名改 ...
- java读取Excel里面的内容包括(xls和xlsx)后缀文件
java通过POI架包(HSSFWorkbook和XSSFWorkbook)读取Excel里面的内容包括(xls和xlsx)后缀文件 在我们平时的开发的过程,难免会遇到需要读取Excel文件,Exce ...
最新文章
- Ajax实例(一)$.ajax的应用
- 获取某个日期的当前周一的时间
- Programming WCF Services 学习笔记四、Instance Management
- 找出一个字符串中出现次数最多的字_Day34:第一个只出现一次的字符
- 探索感染了COVID-19的动物的数据
- 【牛客 - 181F】子序列(容斥,组合数,费马小定理)
- java 写tb级文件_三管齐下!TB 级文件的上传性能瞬间被优化 100 倍!
- Qt笔记-QTcpSocket跨线程调用(官方推荐方法,非百度烂大街方法)
- 47 SD配置-销售凭证设置-激活项目类别的定价
- polymer中的sort和filter
- Debian Security Advisory(Debian安全报告) DSA-4404-1 chromium
- 计算机打开查看方式默认是什么样,win10图片打开方式里没有默认照片查看器的解决方法...
- 【ftp上传文件失败】put: Access failed: 553 Could not create file. (passwd)(接详细配置1问题解决)
- 远程服务器镜像,NAS服务器的远程镜像技术.pdf
- 第八章第六题(代数:两个矩阵相乘的方法)(Algebra: a method of multiplying two matrices)
- linux 进程共享内存同步,Linux使用共享内存通信的进程同步退出问题
- 搞个大点的 某团购App mtgsig
- 基于VS2017的C++ SuperLU混合编程
- html一键使网页字体变大,网页字体变大了怎么办
- Ceph 认证授权和RBD块存储、对象存储使用(三)
热门文章
- linux下解压缩文件中文乱码问题的解决
- python框架之Flask基础篇(一)
- d010:盈数、亏数和完全数
- c#.net调用pdf2swf.exe将pdf文件转换为swf,vs中运行正常,布署IIS服务器部署转换后文字部分为空白...
- 关于loader加载的东西必须是继承sprite
- sqlce wp from查询语句详解
- 正常的人|正确的作息时间
- MyBatis点滴积累
- 一种使用GDI+对图片尺寸和质量的压缩方法
- 【FFmpeg】详解FFmpeg解封装、解码流程