EJS是什么？

ejs是一个款简单的纯js模板引擎，其主要作用是：用来从JSON数据中生成html字符串。

EJS的特性

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

EJS的安装

使用npm的形式来安装：

npm install ejs

或者直接引入：

<script src="ejs.js"></script>

EJS的使用

<% 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 字符串
});

3、参数

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

4、标签含义

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

5、包含

包含要么是绝对路径，或者如果不是的话，被视为相对于调用include的模板的路径（需要filename选项）。 例如，你在./views/users.ejs中包含./views/user/show.ejs，你应该使用<%- include('user/show') %>。

你可能会用到原始输出标签（<%-）避免二次转义HTML输出。

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

包含的内容在运行时插入， 所以你可以在include调用中使用变量作为路径（例如<%- include(somePath) %>）。在你顶级数据对象中的变量都可以用于所有的包含，而局部变量需要传递进来。

注意：仍然支持包含预处理指令（<% include user/show %>）。

6、自定义分隔符

自定义分隔符可以以模板为单位应用，或者全局：

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

// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'

// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

7、缓存

EJS 自带了一个基本的运行时缓存，用于缓存渲染模板的中介JavaScript函数。使用 Node 的 lru-cache 库来添加LRU缓存十分简单：

var ejs = require('ejs')
  , LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit

如果你想清除ejs的缓存，调用ejs.clearCache。如果你需要以一个不同的限额来使用LRU，只需要将ejs.cache重新设置为一个LRU的新实例。

8、布局

EJS 不会特别地支持区块，但是可以采用包含头部和尾部的方法来实现局部，像这样：

<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/798