nodejs之ejs模板引擎介绍
文章栏目307730770
发布时间:2019-02-23 14:59:04

概述

官方网址:https://ejs.bootcss.com/

nodejs之ejs模板引擎介绍

什么是 EJS?

“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

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'

支持

Thinkful上的实时帮助会话

带上你的问题,并与其他EJS用户在一个活动的Thinkful Hangout配对。了解其他开发人员遇到的挑战,或与团队共享您自己的代码以获取反馈。

堆栈溢出

询问你所面临的具体问题,包括你到底想做什么的细节。确保你在问题上贴上EJS标签。您还可以阅读现有的EJS问题。

GitHub问题

问题跟踪器是错误报告、功能请求和提交请求的首选通道。