EJS实例教程详解_ejs模板引擎的使用

EJS是什么？

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

EJS的特性

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

EJS的安装

使用npm的形式来安装：

npm install ejs

或者直接引入：

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

EJS的使用

1、实例

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

2、用法

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