EJS 高效的 JavaScript 模板引擎

什么是 EJS？

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

 

语法简单

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

 

执行迅速

咱们都知道 V8 以及相似 JavaScript 引擎的速度有多快。EJS 可以缓存 JS 函数的中间代码，从而提高执行速度。

 

易于调试

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

特性

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

安装

利用 NPM 安装 EJS 很简单。

$ npm install ejs

Use

将模板字符串和一些数据做为参数传递给 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 = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'