EJS是一套既简单又高效的嵌入式 JS模板语言,可以帮我们利用普通的 JS 代码生成 HTML 页面。其历史悠久,曾一度得到些许大佬的青睐,现在虽然没有vue、react这些项目流行,但其还是有一定的使用场合和学习价值的。
- EJS后缀名为"ejs"
- EJS 支持我们把JS代码直接写在标签内
- EJS 能够缓存 JS函数的中间代码,使执行速度得到极大的提升
- EJS 调错极其简单:因为它所有错误都是普通的 JS 异常,而且也会给我们输出异常发生的具体位置
- EJS能够快速编译与绘制输出,并且其标签很简洁,如:<% %>
- EJS能够自定义分割符,如:用 <? ?> 替换 <% %>
- EJS同时支持服务器端和浏览器 JS 环境
- EJS兼容 Express 视图系统
1. EJS配置
① 安装
npm i ejs --save
② 建立views文件夹
③ 设置模板引擎
app.set("view engine","ejs");
④ 设置存放位置,即views文件夹,第一个参数views的意思是在路径前加views(默认会去找项目根目录下的views文件夹)
app.set("views",[path.jion(__dirname,"./views")]);
⑤ 告诉ejs将html文件作为模板文件来渲染
app.engine("html",require("ejs").__express)
⑥ 将ejs模板渲染成html页面后返回给浏览器
path:模板文件路径、字符串(就是找到views目录下的 ejs的模版文件名所在路径)
data:渲染模板时需要使用的数据、对象
app.get("/test",(req,res)=>{
res.render(path,data);
})
2. ejs基础语法(凡是JS的语句则全部用<% %>括起来)
① 实例
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
② 输出渲染后的 HTML 字符串
let template = ejs.compile(str, options);
template(data);
// ===============================
ejs.render(str, data, options);
// ===============================
ejs.renderFile(filename, data, options, function(err, str){
});
③ ejs.renderFile()
方法实例
1)demo.js
const ejs = require('ejs'); // 加载ejs模块
const path = require('path');
// 回调函数中的第二个参数 str 就是 读取到的HTML字符串
ejs.renderFile(path.join(__dirname, 'demo.html'), {username: 'huangfuyk'}, (err, str) => {
console.log(str); // 输出绘制后的 HTML 字符串
});
2)demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EJS模板引擎</title>
</head>
<body>
<h1><%= username %></h1>
<ul>
<% for(var i=0; i<5; i++) { %>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<% } %>
</ul>
</body>
</html>
3)当我们在终端输入node demo.js
时,结果显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EJS模板引擎</title>
</head>
<body>
<h1>huangfuyk</h1>
<ul>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
</ul>
</body>
</html>
④ for循环语法示例
<%for(let i=0 ;i<data.length;i++){%>
<h2><%=data[i].title %></h2>
<%}%>
⑤ if 判断语法示例
<%if (good.cate_id.toString()==cates[i]._id.toString()) {%>
<option value="<%= cates[i]._id %>" selected><%= cates[i].name %></option>
<%}else{%>
<option value="<%= cates[i]._id %>"><%= cates[i].name %></option>
<%}%>
⑥ 三目运算表达式语法示例
<select name="status" id="">
<option value="">--请选择--</option>
<option value="0" <%= good.status==0?'selected':'' %>>手机</option>
<option value="1" <%= good.status==1?'selected':'' %>>电脑</option>
</select>
⑦ EJS所提供的参数
cache
缓存编译后的函数,需要指定filename
filename
被cache
参数用做键值,同时也用于include
语句context
函数执行时的上下文环境compileDebug
当值为false
时不编译调试语句client
返回独立的编译后的函数delimiter
放在角括号中的字符,用于标记标签的开与闭debug
将生成的函数体输出_with
是否使用with() {}
结构。如果值为false
,所有局部数据将存储在locals
对象上localsName
如果不使用with
,localsName 将作为存储局部变量的对象的名称。默认名称是locals
rmWhitespace
删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的-%>
标签(在一行的中间并不会剔除标签后面的换行符)。escape
为<%=
结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过.toString()
输出。(默认转义 XML)。outputFunctionName
设置为代表函数名的字符串(例如 ‘echo
’ 或 ‘async
当值为true
时,EJS 将使用异步函数进行渲染。(依赖于 JS 运行环境对 async/await 是否支持)
⑧ 标签含义
<%
:‘脚本’ 标签,用于流程控制,无输出。<%_
:删除其前面的空格符(两个下划线)<%=
:输出数据到模板(输出是转义 HTML 标签)<%-
:输出非转义的数据到模板<%#
:注释标签,不执行、不输出内容<%%
:输出字符串 ‘<%’%>
:一般结束标签-%>
:删除紧随其后的换行符_%>
:将结束标签后面的空格符删除(两个下划线)
⑨ 包含指令(include)
因为ejs的语法不支持嵌套,所以只能通过include方法来复用模版。通过 include 指令
将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。) 例如,如果存在 “./views/users.ejs” 和 “./views/user/show.ejs” 两个模板文件,你可以通过 <%- include('user/show'); %>
代码包含后者。
注意:此处可能需要能够输出原始内容的标签 (<%-) 用于 include 指令,避免对输出的 HTML 代码做转义处理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
⑩ EJS默认开启模版缓存,这样在一个页面中多次请求模版文件时,只会请求一次,我们可通过:EJS.config({cache: false})
来关闭缓存
注:此文部分内容参考 :EJS中文文档