node.js -4- ejs 简单教程

本文最后更新于:2021年11月1日 中午

ejs 是 node.js 的一种模板引擎,本文介绍简单用法。

简介

EJS是一个javascript模板库,用来从json数据中生成HTML字符串。

  • 功能:缓存功能,能够缓存好的HTML模板;
  • <% code %>用来执行javascript代码
  • ejs模板文件后缀名 .ejs

常用语法

  • <%...%>包含 js 代码
  • <%=...%>输出变量 变量若包含 '<' '>' '&'等字符 会被转义
  • <%-...%>输出变量 不转义
  • <%- include('user/show') %>引入其他模板 包含 ./user/show.ejs
  • <%# some comments %>来注释,不执行不输出
  • <%% 转义为 '<%'
  • <% ... -%> 删除新的空白行模式?
  • <%_ ... _%> 删除空白符模式

安装

1
2
3
npm install ejs
bower install ejs
//ejs可以配合express框架使用,或直接在node中/浏览器中使用

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//template.ejs:
<% if(comic) { %>
<h2><%=comic.name%></h2>
<% } %>

//test.js:
var comic = {name: 'one piece'};

// 渲染文件模板,
// comic.ejs 包含 header.ejs footer.ejs,
// 若include了文件 必须指定 filename参数 , 参数为文件路径,
// 文件所在目录为查找include资源的目录 path.diranme(specialFilepath)
var html = ejs.render( fs.readFileSync('comic.ejs', 'utf8'), {'comic': comic}, {filename: __dirname+'\\abc.js'});
console.log(html);

方法

  • ejs.compile()

  • ejs.render()

    1
    2
    3
    4
    5
    6
    7
    var template = ejs.compile(str, options); //=> function
    template(data); //=> html

    ejs.render(str, data, options); //=>html

    //or 把str data options都放在一个object中传入
    ejs.render(allOptions);
  • options参数

    • cache 缓存编译后的函数(ejs.compile(…) ,需要 filename参数作为缓存的key
    • filename 用于缓存的key,和include
    • context 函数的执行上下文
    • compileDebug 输出compile的信息来跟踪调试
    • client 返回编译后的函数
    • delimiter <% … %> 指这里的%
    • debug 输出ejs.compile()得到函数的函数体
    • strict ejs.compile()返回的函数是否执行在严格模式
    • _with 是否使用 with(){…} 来访问本地变量
    • localsName 保存本地变量的对象名,默认为locals
    • rmWhitespace 移除多余空格
  • include(文件包含)
    被包含文件的路径可以是:绝对路径或相对路径,还可以传入data

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

    include是在运行时被执行的,所以可以支持路径为变量, 如:

    1
    2
    3
    <% somePath='some/path' %>
    ...
    <%- include(somePath) %>
  • 自定义模板定界符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var ejs = require('ejs');
    var users = ['lufy', 'zoro', 'nami'];

    //渲染字符串模板时,指定分隔符
    //<%= ... %> 输出变量 输出表达式的结果
    var ret1 = ejs.render('<?=users.join(" | "); ?> ', {users: users}, {delimiter: '?'});
    console.log(ret1); //=>lufy | zoro | nami

    // 全局指定分隔符
    ejs.delimiter = '$';
    var ret2 = ejs.render('<$= users.join(" | "); $>', {users: users});
    console.log(ret2);
  • 页面布局
    ejs 没有显式的支持布局功能,但是可以通过 include 页头页脚的方式,实现基本的布局。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //comic.ejs:
    <%- include('header'); %>
    <h1>hot comic now: </h1>
    <% if(comic) { %>
    <h2><%= comic.name %></h2>
    <% } %>
    <%- include('footer') %>

    //test.js:
    var html = ejs.render( fs.readFileSync('comic.ejs', 'utf8'), {'comic': comic}, {filename: __dirname+'\\abc.js'});

基本语法

引入其他文件

1
<%- include('path/filename', { data: data }) %>

上面的代码将path目录下的filename.ejs文件引入到当前文件中,并将data的值传入filename.ejs文件中。

此处使用<%- %>是为了避免二次转义。

也可以使用<% include path/filename %>进行引入

设置分隔符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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'

模板嵌套

ejs不支持像Jade那样的block布局,但是可以使用include的方式实现布局

1
2
3
4
5
6
7
8
<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>

变量定义标签属性

1
<h1 style="<%= style %>"></h1>

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
<% for(var i in users){ %>
<li><%= users[i].username %>--<%= users[i].age %></li>
<% } %>
</ul>

<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>

if语句

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 将所有条件判断代码放<% %>里面即可 -->
<% if(isLogin){ %>
<div class="user">
<a href="">Jack</a>
<a href="">退出</a>
</div>
<% }else{ %>
<div class="login">
<a href="">登录</a>
<a href="">注册</a>
</div>
<% } %>

参考资料