EJS浅析

菩提谛听
329 阅读3分钟

概述

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>
avatar
文章
阅读
粉丝