EJS浅析 - 掘金

概述

What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript. 简言之，EJS就是高效的可嵌入的JavaScript模版引擎，用在从JSON对象数据中生成HTML字符串，即是HTML = Template + Data。

const ejs = require('ejs');

const templateEngines = ['jade', 'ejs'];
const template = '
  <ul>
	<% templateEngines.forEach((engine) => { %>
	  <li>
		<span><%= engine %></span>
	  </li>
	<% }) %>
  </ul>
';
const html = ejs.render(template, {templateEngines});

标签含义

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

核心概念

EJS的思想就是Template + Data => HTML，也就是字符串 + 数据 => 目标字符串。EJS是字符串模版引擎，生成的也是字符串。因此其既可在服务端使用，也可浏览器端使用。EJS比较重要的概念主要有四个Template、Data、complie、render。

Template也就是模版，实质上就是字符串。

<% if (user) { %>
  <p><%= user.name %></p>
<% } %>

Data也就是数据，模版包括可变部分和固定部分，其中可变部分就是通过Data控制的。

<ul>
  <% templateEngines.forEach((engine) => { %>
	<li>
	  <span><%= engine %></span>
	</li>
  <% }) %>
</ul>

complie也就是编译函数，将Template和option配置参数转化为一个函数，往这个函数中注入数据，生成目标字符串。

const ejs = require('ejs');

const template = ejs.complie(template, option);
template(data); // 生成目标字符串

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)。

outputFunctionName设置为代表函数名的字符串（例如echo或print）时，将输出脚本标签之间应该输出的内容。

async当值为true时，EJS将使用异步函数进行渲染。（依赖于JavaScript运行环境对async/await是否支持）

render也就是渲染函数，可以直接通过template、data和option生成目标字符串。

const ejs = require('ejs');

const template = '<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>'
ejs.render(template, {user: {name: 'ejs'}}, {async: true});

include

EJS不支持潜逃语法，因此需要通过include指令将引用其他模版。

<html>
<body>
  <%- include('header'); -%>
  	<ul>
	  <% users.forEach(function(user){ %>
	    <%- include('user/show', {user: user}); %>
	  <% }); %>
	</ul>
  <%- include('footer'); -%>
</body>
</html>