浅析嵌入式 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的语句则全部用<% %>括起来)

① 实例

<% 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
  • filenamecache 参数用做键值,同时也用于 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('user/show'); %> 代码包含后者。

注意:此处可能需要能够输出原始内容的标签 (<%-) 用于 include 指令,避免对输出的 HTML 代码做转义处理。

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

⑩ EJS默认开启模版缓存,这样在一个页面中多次请求模版文件时,只会请求一次,我们可通过:EJS.config({cache: false})来关闭缓存


注:此文部分内容参考 :EJS中文文档

展开阅读全文
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值