EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。
1、安装
npm install ejs
2、标签含义
简洁的模板标签:<% %>
- <% '脚本' 标签,用于流程控制,无输出。
- <%_ 删除其前面的空格符
- <%= 输出数据到模板(输出是转义 HTML 标签)
- <%- 输出非转义的数据到模板
- <%# 注释标签,不执行、不输出内容
- <%% 输出字符串 '<%'
- %> 一般结束标签
- -%> 删除紧随其后的换行符
- _%> 将结束标签后面的空格符删除
3、输出数据到模板(输出的是转义 HTML 标签)
// 加载ejs模块
const ejs = require('ejs');
var html = '<h1><%= username %></h1>';
// ejs.render(str, data, options);
// => 输出绘制后的 HTML 字符串
var result = ejs.render(html, {username: 'liu'});
console.log(result);
4、ejs.renderFile()
app.js
// 加载ejs模块
const ejs = require('ejs');
const path = require('path');
// ejs.renderFile(filename, data, options, function(err, str){});
// 回调函数中的第二个参数 str 就是 读取到的HTML 字符串
ejs.renderFile(path.join(__dirname, 'index.html'), {username: 'liu'}, (err, str) => {
// str => 输出绘制后的 HTML 字符串
console.log(str);
});
index.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>模板引擎</title>
</head>
<body>
<h1><%= username %></h1>
<ul>
<% for(var i=0; i<5; i++) { %>
<li>高效的 JavaScript 模板引擎:ejs</li>
<% } %>
</ul>
</body>
</html>