EJS 高效的 JavaScript 模板引擎

发布于 2019-12-29 20:11:42 字数 5707 浏览 1338 评论 0

"E" 代表 "effective"，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

特点

纯 JavaScript

我们热爱 JavaScript，他是一门友好的编程语言。所有模板语言都要成长为图灵完备的语言，也就是说要增加一个中间层。何必呢，直接用 JS 吧！

快速开发

无需浪费时间钻研那些所谓“优雅”的神秘语法，也不用研究数据究竟如何能够被正确处理。

语法简单

EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ，完成工作很轻松！

执行迅速

我们都知道 V8 以及类似 JavaScript 引擎的速度有多快。EJS 能够缓存 JS 函数的中间代码，从而提升执行速度。

易于调试

调试 EJS 错误（error）很容易：所有错误都是普通的 JavaScript 异常，并且还能输出异常发生的位置。

社区活跃

EJS 背后是一个活跃用户组成的大规模社区，能够为 EJS 的演进提供大力支持。我们同时很高兴回答你的问题或提供帮助。

特性

快速编译与绘制输出
简洁的模板标签：<% %>
自定义分割符（例如：用 <? ?> 替换 <% %>）
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express 视图系统

入门

安装

利用 NPM 安装 EJS 很简单。

$ npm install ejs

使用方法

将模板字符串和一些数据作为参数传递给 EJS，Duang，HTML 出来了。

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

浏览器支持

从这里下载最新的浏览器版本，然后引入页面即可。

<script src="ejs.js"></script>
<script>
  var people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>

帮助文档

实例

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

用法

var template = ejs.compile(str, options);
template(data);
// => 输出绘制后的 HTML 字符串

ejs.render(str, data, options);
// => 输出绘制后的 HTML 字符串

ejs.renderFile(filename, data, options, function(err, str){
    // str => 输出绘制后的 HTML 字符串
});

参数

cache 缓存编译后的函数，需要提供 filename
filename 被 cache 参数用做键值，同时也用于 include 语句
context 函数执行时的上下文环境
compileDebug 当为 false 时不编译调试语句
client 返回独立的编译后的函数
delimiter 放在角括号中的字符，用于标记标签的开与闭
debug 将生成的函数体输出
_with 是否使用 with() {} 结构。如果为 false，所有局部数据将存储在 locals 对象上。
localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。

标签含义

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

包含（include）

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%- include('user/show'); %> 代码包含后者。

你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。

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

自定义分隔符

可针对单个模板或全局使用自定义分隔符：

var ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// 单个模板文件
ejs.render('<?= users.join(" | "); ?>', {users: users},
    {delimiter: '?'});
// => 'geddy | neil | alex'

// 全局
ejs.delimiter = '

支持

Live help sessions on Thinkful

Bring your questions and pair with other ejs users in a live Thinkful hangout. Hear about the challenges other developers are running into, or screenshare your own code with the group for feedback.

Stack Overflow

Ask questions about specific problems you have faced, including details about what exactly you are trying to do. Make sure you tag your question with ejs. You can also read through existing ejs questions.