浅析嵌入式 JS 模板引擎之EJS
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的语句则全部用括起来）
① 实例
② 输出渲染后的 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
EJS模板引擎
<% for(var i=0; i
- 高效的嵌入式 JavaScript 模板引擎
3）当我们在终端输入node demo.js时，结果显示
EJS模板引擎
huangfuyk
- 高效的嵌入式 JavaScript 模板引擎
- 高效的嵌入式 JavaScript 模板引擎
- 高效的嵌入式 JavaScript 模板引擎
- 高效的嵌入式 JavaScript 模板引擎
- 高效的嵌入式 JavaScript 模板引擎
④ for循环语法示例
<%for(let i=0 ;i
⑤ if 判断语法示例
<option value="" selected>
<option value="">
⑥ 三目运算表达式语法示例
--请选择--
<option value="0" >手机
<option value="1" >电脑
⑦ 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’ 或 ‘print’）时，将输出脚本标签之间应该输出的内容。
async 当值为 true 时，EJS 将使用异步函数进行渲染。（依赖于 JS 运行环境对 async/await 是否支持）
⑧ 标签含义
<% :‘脚本’ 标签，用于流程控制，无输出。
<%_ :删除其前面的空格符（两个下划线）
<%= :输出数据到模板（输出是转义 HTML 标签）
<%- :输出非转义的数据到模板
<%# :注释标签，不执行、不输出内容
<%% :输出字符串 ‘<%’
%> :一般结束标签
-%> :删除紧随其后的换行符
_%> :将结束标签后面的空格符删除（两个下划线）
⑨ 包含指令（include）
因为ejs的语法不支持嵌套，所以只能通过include方法来复用模版。通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。) 例如，如果存在 “./views/users.ejs” 和 “./views/user/show.ejs” 两个模板文件，你可以通过 代码包含后者。
注意：此处可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。
⑩ EJS默认开启模版缓存，这样在一个页面中多次请求模版文件时，只会请求一次，我们可通过：EJS.config({cache: false})来关闭缓存
注：此文部分内容参考 ：EJS中文文档
作者：huangfuyk.
