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');
const path = require('path');
ejs.renderFile(path.join(__dirname, 'demo.html'), {username: 'huangfuyk'}, (err, str) => {
console.log(str);
});
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 缓存编译后的函数，需要指定 filenamefilename 被 cache 参数用做键值，同时也用于 include 语句context 函数执行时的上下文环境compileDebug 当值为 false 时不编译调试语句client 返回独立的编译后的函数delimiter 放在角括号中的字符，用于标记标签的开与闭debug 将生成的函数体输出_with 是否使用 with() {} 结构。如果值为 false，所有局部数据将存储在 locals 对象上localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 localsrmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> 标签（在一行的中间并不会剔除标签后面的换行符)。escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。outputFunctionName 设置为代表函数名的字符串（例如 ‘echo’ 或 ‘print’）时，将输出脚本标签之间应该输出的内容。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中文文档
|
