EJS模板学习

“E” 代表 “effective”，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。

特性

快速编译与绘制输出
简洁的模板标签：<% %>
自定义分割符
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express 视图系统

使用

服务端使用 (将模板字符串和一些数据作为参数传递给 EJS，Duang，HTML 出来了。)

var ejs = require('ejs'),
people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});

浏览器使用 (下载最新版本，引入页面即可)

<script src="ejs.js"></script>
<script>
  var people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>

方法

js.compile(str, options)

编译字符串得到模板函数

str：需要解析的字符串模板
option：配置选项

let template = ejs.compile('<%=123 %>');
let result = template();
console.log(result);//123

ejs.render(str, data, options)

直接渲染字符串并生成html

str：需要解析的字符串模板
data：数据
option：配置选项

let people = ['geddy', 'neil', 'alex'];
let result= ejs.render('<%= people.join(", "); %>',{people: people});
console.log(result);//geddy, neil, alex

ejs.renderFile(filename, data, options, function(err, str)

渲染ejs模板文件
filename: ejs模板文件
data：数据
option：配置选项
function(err, str)：回调函数

ejs_test.js

let ejs = require('ejs');

ejs.renderFile('a.ejs', { name: 'EJS'}, (err, data)=>{
    if (err) {
        console.log('error')
    } else {
        console.log(data)
    }
});

a.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello <%= name %>!!!
</body>
</html>

输出

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello EJS!!!
</body>
</html>

参数options

cache 缓存编译后的函数，需要提供 filename
filename 被 cache 参数用做键值，同时也用于 include 语句
context 函数执行时的上下文环境
compileDebug 当为 false 时不编译调试语句
client 返回独立的编译后的函数
delimiter 放在角括号中的字符，用于标记标签的开与闭
debug 将生成的函数体输出
_with 是否使用 with() {} 结构。如果为 false，所有局部数据将存储在 locals 对象上。
localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。

标签含义

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

包含（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>