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模板以及其关联的样式表，从而实现定制你的网站页面的功能。
相关文章：
一个推荐系统，实现完整的设计-在百度搜索关键词推荐案例
在之前一篇博文中， 有同学在评论中问了个问题： 怎样解决因式分解带来的推荐冷门。热门关键词的问题。 在回答这个问题的时候， 想到了近几年在做搜索推荐系统的过程中， 学术界和工业界的一些差别。 正好近期正在做技术规划…
如何充分利用JavaScript（ES6）中的解构功能
by Joanna Gaudyn乔安娜高登(Joanna Gaudyn) Destructuring was a new addition to ES6. It took inspiration from languages like Python and allows you to extract data from arrays and objects into distinct variables. It might sound like something you’ve done in…
React 开发环境搭建
先来一个 React 官方文档的链接 点击跳转 搭建 React 的前期准备：你的本地环境需要安装 cnpm、node。 注：代码块中的 $ 代表： $后面是在命令行输入的命令，举例 $ npm start 解：实际上是应该打开命令行输入 npm st…
c++中的友元重载
1 语法 返回值类型 operator 运算符名称(形参列表) { 重载实体 } --------->operator和运算符名称在一起构造成新的函数名 2 案例 1 #include <iostream>2 3 using namespace std;4 5 class Complex6 {7 public:8 9 Complex(float x0,float y0) 10 :_…
WPF解析TTF 字体
偶遇需要自己解析 TTF 字体并显示，此做。。。 using System; using System.Collections.Generic; using System.Drawing.Text; using System.IO; using System.Linq; using System.Runtime.Serialization; using System.Text; using System.Windows; using System.W…
redux logic_Redux-Logic简介
redux logicby Sam Ollason通过萨姆奥拉森(Sam Ollason) Redux-Logic简介 (An Introduction to Redux-Logic) This article will go through a high-level overview of Redux-Logic. We will look at what is it, why it is needed, how it differs from other Redux middlewa…
[SDOI2009]HH的项链
题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链。HH 相信不同的贝壳会带来好运，所以每次散步完后，他都会随意取出一段贝壳，思考它们所表达的含义。HH 不断地收集新的贝壳，因此，他的项链变得越来越长。有一…
DvaJS 入门， 快速上手Dva
为什么要使用Dva? React 没有解决的问题 React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。 如果开发大应用，还需要解决一个问题。 通信：组件之间如何通信？数据流：数据如何和视图串联起来？路由…
Static、DynamicResource学习笔记一
定义了资源后，我们可以在元素中直接使用该资源，但又分为StaticResource及DynamicResource两种方式。 StaticResource 静态资源在首次创建窗口时一次性的设置完毕，之后源资源对象本身发生的任何变化都会影响到使用该资源的元素，如果…
javascript迭代器_JavaScript迭代器概述
javascript迭代器by Joanna Gaudyn乔安娜高登(Joanna Gaudyn) JavaScript迭代器概述 (An overview of JavaScript iterators) for，for…in和for…of循环之间的区别 (The difference between for, for…in and for…of loops) Iteration might be one of the most c…
knockout学习笔记目录
关于knockout学习系列的文章已经写完，这里主要是做个总结，并且将目录罗列出来，方便查看。欢迎各位大神拍砖和讨论。 总结 kncokout是一个轻量级的UI类库，通过MVVM模式使前端的UI简单话，减少javascript代码的编写。通常…
ant Design Pro 登录状态管理
未登录自动跳转到登录页面，登录成功不跳转回登录页面的实现代码调用流程。 ant Design Pro 是一个企业中后台管理框架，开始做他，第一个肯定是要做登录，下面来看一下它是怎么登录的。 先看路由配置 Authorized.jsx代码࿱…
初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图
初级java开发学习路线So you have started your journey into the world of web development. But what do you learn first? The Internet is overloaded with a wealth of information about the millions of different technologies that a web developer can know.因此&am…
国外物联网平台初探（四）：Ayla Networks
定位 Ayla企业软件解决方案为全球部署互联产品提供强大的工具 功能 Ayla的IoT平台包含3个主要组成部分： (1) Ayla嵌入式代理Ayla Embedded Agents (2) Ayla云服务Ayla Cloud Services (3) Ayla应用库Ayla Application Libraries 设备 开发者使用任何微控制器、操作系…
《英语语法新思维初级教程》学习笔记（一）名词短语
参考资料： 1. 《英语语法新思维初级教程》 ▶ 知识点 ▼ 英语是“固定词序语言（a fixed-word-order language）”。 ▼ 语言的构造级别分五个层次：1. 词（word）；2. 短语（phase…
根据数组中对象的属性值排序倒叙
数组中对象的属性值排序倒叙demo function compare(e) {return function (a, b) {var value1 a[e];var value2 b[e];return parseInt(value1) - parseInt(value2);} } var arr[{a:2},{a:3},{a:1}];var arr2 arr.sort(compare(time)).reverse();console.log(arr2) //[{a:3}…
!! javascript_产量！ 产量！ 生成器如何在JavaScript中工作。
!! javascriptby Ashay Mandwarya ?️??由Ashay Mandwarya提供吗？ 产量！ 产量！ 生成器如何在JavaScript中工作。 (Yield! Yield! How Generators work in JavaScript.) If the title doesn’t already give a hint, we will be discussin…
ACM 竞赛高校联盟 练习赛 第二场 BC
B. 题解： 枚举约数即可，判断n个数能否填约数的整数倍 #include <iostream> #include <cstring> #include <cstdio> using namespace std; typedef long long LL; int main(){LL T, n, m;cin>>T;while(T--){cin>>n>>…
在一个数组中查找两个重复出现的数字
题目如下：现有一个数组长度为n1，里面存放有1到n-2，顺序不定，其中有两个数字出现了两次，现在要找出那两个数字。 例子A{2, 3, 1, 4, 5, 2, 4}， 这个数组长度为7，存放了1到5，但2和4出现…
React 组件生命周期
组件的生命周期可分成三个状态： Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一…
银行软件开发实习生_如何找到学生的软件开发人员实习生
银行软件开发实习生by Grazietta Hof由Grazietta Hof 如何找到学生的软件开发人员实习生 (How to find a Software Developer Internship as a student) Side note: Although this article is directed at students (because I am one so I can easily relate), I’m sure a l…
MAC OS X El CAPITAN 搭建SPRING MVC （1）- 目录、包名、创建web.xml
一、 下载STS（Spring Tool Suite） 官方地址：http://spring.io/tools/sts 下载spring tool suite for mac 最新版本。这个IDE是很不错的，其中spring插件已经配置好了。下载解压缩（一定要英文目录下）…
iOS小知识点记录
1>UITextField实现leftView: self.inputTextField [[UITextField alloc]initWithFrame:CGRectMake(10, 10, 200, 25)];self.inputTextField.delegate self;self.inputTextField.font [UIFont systemFontOfSize:15];self.inputTextField.placeholder " 想说点什么?…
Ant Design Pro 网络请求，视图绑定model并且渲染到页面 umi-request
封装网络请求，在service中新建接口，在model调用service，在视图绑定model并且得到网络请求的回调函数，获取网络请求的数据渲染到页面。 网络请求数据走向； 1.在utils/request.js 封装网络请求； /*** request 网络请求工具* 更详细的 api 文档: https://github.com/umijs…
2019机器学习比赛_2019顶尖的机器学习课程
2019机器学习比赛With strong roots in statistics, Machine Learning is becoming one of the most interesting and fast-paced computer science fields to work in. There’s an endless supply of industries and applications machine learning can be applied to to mak…
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getCo…
排序算法7---快速排序算法
原理： 通过一趟排序将待排记录分割成独立的两部分，其中一部分记录的关键字均比另一部分记录的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序的目的。 #include <stdio.h> #define MAXSIZE 9typedef stru…
dispatch callback ant design pro 网络请求回调函数
index.jsx 代码解析：在组件初次渲染时调用 model 中 命名空间为 a_models 的 getData 网络请求，传了一个patload 参数和 callback 回调函数过去，然后通过 this.setState ()更新视图的 state。 import { Form, Tabs,Affix, Button,Input,Table } from antd; import Re…
bigquery使用教程_如何使用Python和Google BigQuery构建机器人以自动执行您的笨拙任务...
bigquery使用教程Do you have repetitive tasks? Something that you do regularly, every week or even every day? Reporting might be one of your weekly or daily tasks. You query or ask for the data, and do some visualizations, then give it to your boss. What …
5S后返回首页
1 <!DOCTYPE html>2 <html>3 <head>4 <title>5S后返回首页</title> 5 <meta http-equiv"Content-Type" content"text/html; charsetgkb"/> 6 </head>7 <body>8 <h2>操作成功</h2>…