原文地址（本人博客）：www.waylon.online/blog?id=f8d…

前言

模板引擎是一种用于呈现动态HTML视图的工具，它可以将数据和逻辑与静态HTML文件结合在一起，以生成响应输出。

在我的上家公司，我们的模版引擎用的是PHP的Blade，与Java的JSP一样，这些模版引擎都需要一定的后端语言学习成本，到了现在这家公司发现其实也可以通过前端去实现，那就是本篇文章我要介绍的EJS。

正文

前置条件

安装依赖（这里以Express作为示例）


npm install ejs
npm install express
npm install ejs
npm install express
npm install ejs
npm install express

安装对应的vscode插件
这里我用的是EJS language support

规范

以下只介绍几个比较重要的ejs规范：

标签含义

<% ‘script’ 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

嵌套

通过include关键字进行嵌套，通常使用(<%-)包含前者，避免对输出的 HTML 代码做转义处理。


<%- include('header') %>
<%- include('header') %>
<%- include('header') %>

代码

Express入口文件


// index.js
const express = require('express')
let ejs = require('ejs')
const app = express()
const port = 3000
//引用ejs
app.set('views', 'public'); //设置视图的对应目录
app.set("view engine", "ejs"); //设置默认的模板引擎
app.engine('ejs', ejs.__express); //定义模板引擎
app.get('/', (req, res) => {
    // 向模版页注入变量
    const provider = { title: 'WAYLON', test: 123 }
    res.render('template.ejs', provider, (err, html) => {
        // 支持回调
        console.warn('waylon test', err, html);
    })
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})
// index.js
const express = require('express')
let ejs = require('ejs')
const app = express()
const port = 3000


//引用ejs
app.set('views', 'public'); //设置视图的对应目录
app.set("view engine", "ejs"); //设置默认的模板引擎
app.engine('ejs', ejs.__express); //定义模板引擎
app.get('/', (req, res) => {
    // 向模版页注入变量
    const provider = { title: 'WAYLON', test: 123 }
    res.render('template.ejs', provider, (err, html) => {
        // 支持回调
        console.warn('waylon test', err, html);
    })
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})
// index.js
const express = require('express')
let ejs = require('ejs')
const app = express()
const port = 3000


//引用ejs
app.set('views', 'public'); //设置视图的对应目录
app.set("view engine", "ejs"); //设置默认的模板引擎
app.engine('ejs', ejs.__express); //定义模板引擎
app.get('/', (req, res) => {
    // 向模版页注入变量
    const provider = { title: 'WAYLON', test: 123 }
    res.render('template.ejs', provider, (err, html) => {
        // 支持回调
        console.warn('waylon test', err, html);
    })
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

模版


// public/template.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <%# 拿到title并输出 %>
    <title><%- title %></title>
</head>
<body>
    <%# 头部模版 %>
    <%- include('header') %>
    <%# js脚本 %>
    <% for(let i=0;i<10;i++){ %>
    <%# 显示输出 %>
    <%= i %>
    <% } %>
    <%= test %>
    <%# 底部模版 %>
    <%- include('footer') %>
</body>
</html>
// public/template.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <%# 拿到title并输出 %>
    <title><%- title %></title>
</head>
<body>
    <%# 头部模版 %>
    <%- include('header') %>
    <%# js脚本 %>
    <% for(let i=0;i<10;i++){ %>
    <%# 显示输出 %>
    <%= i %>
    <% } %>
    <%= test %>
    <%# 底部模版 %>
    <%- include('footer') %>
</body>
</html>
// public/template.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <%# 拿到title并输出 %>
    <title><%- title %></title>
</head>
<body>
    <%# 头部模版 %>
    <%- include('header') %>
    <%# js脚本 %>
    <% for(let i=0;i<10;i++){ %>
    <%# 显示输出 %>
    <%= i %>
    <% } %>
    <%= test %>
    <%# 底部模版 %>
    <%- include('footer') %>
</body>
</html>

子模版


// public/header.ejs
<% const pageName = 'waylonDemo' %>
<header>
    <%= pageName %>
</header>
// public/footer.ejs
<% for (let i of ['到底啦','OoO']) { %>
<footer>
    <div><%= i %></div>
</footer>
<% } %>
// public/header.ejs
<% const pageName = 'waylonDemo' %>
<header>
    <%= pageName %>
</header>


// public/footer.ejs
<% for (let i of ['到底啦','OoO']) { %>
<footer>
    <div><%= i %></div>
</footer>
<% } %>
// public/header.ejs
<% const pageName = 'waylonDemo' %>
<header>
    <%= pageName %>
</header>


// public/footer.ejs
<% for (let i of ['到底啦','OoO']) { %>
<footer>
    <div><%= i %></div>
</footer>
<% } %>