当前位置: 首页 > 工具软件 > EJS > 使用案例 >

EJS快速回忆

拓拔德馨
2023-12-01

平时只写前端代码,很少去写ejs这种模板语言,可能隔几个月接触一下全栈项目,EJS的语法又忘了大半,索性自己写一篇博客记录一下,省得老是花时间回顾。

目的

EJS的目的就是让我们最舒服的方式去写模板,也就是遵循写html的方式去写就行了,但是里面会有一些逻辑操作,变量等等没办法用html的方式来写,所以EJS就是帮我们处理了一些类似的问题。

使用

安装

$ npm install ejs

引入

var ejs = require('ejs')

//ES6写法
import ejs        from 'ejs';

使用

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

我们的最终目的就是得到一段插入数据之后的html,ejs就是没有放入数据的模板页面。

速查

基础实例

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

标签

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

渲染函数

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

其实完成的事是一样的,compile返回一个渲染函数,render直接返回html字符串,renderFile则是通过读取文件渲染模板。
当然这里面的options有多种配置:

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

模板中引入模板(include)

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

本文大部分内容来自官方文档。

 类似资料: