ejs模版语法

模板语言是什么？就是帮我们用 JavaScript 代码生成 HTML 页面。那我们看下它怎么渲染 HTML：

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

是不是和 ReactDOM 的 render 很像？

ReactDOM.render(<h1>Hello, Mum</h1>, document.getElementById('root'));

用模版语言渲染页面的方法都大同小异，而且一般也不会单独用ejs，像vue-cli这些框架都帮我们集成好了。所以这个部分不用太过关注，更不用去精读它的教程。在现代项目里，我们一般只需要用到它的模版语法。

ejs 语法

1. 纯脚本标签

<% code %>
里面可以写任意的 js，用于流程控制，无任何输出。

<% alert('hello world') %> // 会执行弹框

2. 输出经过 HTML 转义的内容

<%= value %> 可以是变量
<%= a ? b : c %> 也可以是表达式
<%= a + b %>
即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体，像< > &
因此用<%=，最好保证里面内容不要有HTML字符

const text = '<p>你好你好</p>'
<h2><%= text %></h2> // 输出 &lt;p&gt;你好你好&lt;/p&gt; 插入 <h2> 标签中

3. 输出非转义的内容(原始内容)

<%- 富文本数据 %> 通常用于输出富文本，即 HTML内容
上面说到<%=会转义HTML字符，那如果我们就是想输出一段HTML怎么办呢？
<%-不会解析HTML标签，也不会将字符转义后输出。像下例，就会直接把 <p>我来啦</p> 插入 <h2> 标签中

const content = '<p>我来啦</p>'
<h2><%- content %></h2>

4. 引入其他模版

<%- include('***文件路径') %>
将相对于模板路径中的模板片段包含进来。
用<%- include指令而不是<% include，为的是避免对输出的 HTML 代码做转义处理。

// 当前模版路径：./views/tmp.ejs
// 引入模版路径：./views/user/show.ejs
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

5. 条件判断

<% if (condition1) { %>
  ... 
<% } %>

<% if (condition1) { %>
  ... 
<% } else if (condition2) { %>
  ... 
<% } %>

// 举例
<% if (a && b) { %>
  <p>可以直接放 html 内容</p>
<% } %>

<% if (a && b) { %>
  <% console.log('也可以嵌套任意ejs模版语句') %>
<% } %>

6. 循环

<% for(var i = 0; i < target.length; i++){ %>
  <%= i %> <%= target[i] %>
<% } %>

<% for(var i in jsArr) { %>
  <script type="text/javascript" src="<%= jsArr[i] %>" ref="preload"></script>
<% } %>

// 推荐
<% for(var css of cssArr) { %>
  <link rel="stylesheet" href="<%= css %>" />
<% } %>