node.js -4- ejs 简单教程一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

title: node.js -4- ejs 简单教程
mathjax: false
date: 2021-08-13 21:10:01
tags: [Coding, Node_js]
categories: [Coding, Node_js]

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

简介

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

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

常用语法

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

安装

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

基本用法

//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()

  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

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

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

  <% somePath='some/path' %>
  ...
  <%- include(somePath) %>

自定义模板定界符

  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 页头页脚的方式，实现基本的布局。

  //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'});

基本语法

引入其他文件

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

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

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

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

设置分隔符

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的方式实现布局

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

变量定义标签属性

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

循环

<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语句

<!-- 将所有条件判断代码放<% %>里面即可 -->
    <% if(isLogin){ %>
    <div class="user">
        <a href="">Jack</a>
        <a href="">退出</a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href="">登录</a>
        <a href="">注册</a>
    </div>
    <% } %>

node.js -4- ejs 简单教程

简介