模板语言是什么?就是帮我们用 JavaScript 代码生成 HTML 页面。那我们看下它怎么渲染 HTML:
const ejs = require('ejs'),
let people = ['geddy', 'neil', 'alex']
const html = ejs.render('<%= people.join(", "); %>', {people: people});
是不是和 ReactDOM 的 render 很像?
ReactDOM.render(Hello, Mum
, 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 = '你好你好
'
<%= text %>
// 输出 <p>你好你好</p> 插入 标签中
3. 输出非转义的内容(原始内容)
我来啦<%- 富文本数据 %>
通常用于输出富文本,即 HTML内容
上面说到<%=
会转义HTML字符,那如果我们就是想输出一段HTML怎么办呢?
<%-
不会解析HTML标签,也不会将字符转义后输出。像下例,就会直接把
插入
标签中
const content = '我来啦
'
<%- content %>
4. 引入其他模版
const content = '我来啦
'
<%- content %>
<%- include('***文件路径') %>
将相对于模板路径中的模板片段包含进来。
用<%- include
指令而不是<% include
,为的是避免对输出的 HTML 代码做转义处理。
// 当前模版路径:./views/tmp.ejs
// 引入模版路径:./views/user/show.ejs
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
5. 条件判断
<% if (condition1) { %>
...
<% } %>
<% if (condition1) { %>
...
<% } else if (condition2) { %>
...
<% } %>
// 举例
<% if (a && b) { %>
可以直接放 html 内容
<% } %>
<% if (a && b) { %>
<% console.log('也可以嵌套任意ejs模版语句') %>
<% } %>
6. 循环
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
<% for(var i in jsArr) { %>
<% } %>
// 推荐
<% for(var css of cssArr) { %>
<% } %>