# EJS

# 1. 说明

Embedded JavaScript template

模板引擎

# 2. 安装

npm i ejs

# 3. 使用

方式一：

const ejs = require('ejs');

// 模板
const template = 'My name is <%= name %>'; 

// 数据
const data = {
  name: '张三',
};

// 渲染
const html = ejs.render(template, data);

console.log(html);
//=> My name is 张三

方式二：

const ejs = require('ejs');

// 模板
const template = ejs.compile('My name is <%= name %>')

// 数据
const data = {
  name: '张三',
};

// 渲染
const html = template(data);

console.log(html);
//=> My name is 张三

# 4. 语法

# scriptlet (程序片段)

<%
<%_ 删除前面所有的空白字符

# outputs (输出，插值)

<%= 会转义内容
<%- 不转义内容

# comment (注释)

<%#

# 结束标签

%>
-%> 删除后面的换行符
_%> 删除后面的空格

# 5. 示例

# 5.1. 生成 ul 列表

代码：

const ejs = require('ejs');

const template = `
<ul>
  <%_ 
  persons.forEach((item) => {
    if (item.age < 18) {
      return;
    }
  _%>
    <li> <%= item.name %>, <%= item.age %> </li>
  <%_  
    }
  )
  _%>
</ul>
`; 

const data = {
  persons: [
    { name: 'zhangSan', age: 18 },
    { name: 'lisi', age: 19 },
    { name: 'wangwu', age: 16 },
    { name: 'zhaoliu', age: 20 },
  ],
};

const html = ejs.render(template, data);

console.log(html);

输出：

<ul>
    <li> zhangSan, 18 </li>
    <li> lisi, 19 </li>
    <li> zhaoliu, 20 </li>
</ul>

# 树形结构

const ejs = require('ejs');

const treeTemplate = ejs.compile(`\
<%= '  '.repeat(level) %><ul>
<% tree.forEach((item) => { -%>
<%    if (!item.children) { -%>
<%=     '  '.repeat(level + 1) %><li><%= item.label %></li>
<%    } else { -%>
<%=     '  '.repeat(level + 1) %><li>
<%=     '  '.repeat(level + 2) %><%= item.label %>
<%-     treeTemplate({ tree: item.children, treeTemplate, level: level + 2 }) -%>
<%=     '  '.repeat(level + 1) %></li>
<%    } -%>
<% }) -%>
<%= '  '.repeat(level) %></ul>
`);

const data = {
  treeTemplate,
  level: 0,
  tree: [
    { label: '1级节点A' },
    { 
      label: '1级节点B', 
      children: [
        { label: '2级节点A' },
        { label: '2级节点B' },
        { label: '2级节点C',
          children: [
            { label: '3级节点A' },
            { label: '3级节点B' },
          ]
        },
      ] 
    },
    { label: '1级节点C' },
  ]
};

const html = treeTemplate(data);

console.log(html);
/* =>
<ul>
  <li>1级节点A</li>
  <li>
    1级节点B
    <ul>
      <li>2级节点A</li>
      <li>2级节点B</li>
      <li>
        2级节点C
        <ul>
          <li>3级节点A</li>
          <li>3级节点B</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>1级节点C</li>
</ul>
*/

# 6. 参考

本章目录