node.js -4- ejs 简单教程

为为为什么

发布于 2022-08-06 10:05:29

1.7K00

代码可运行

文章被收录于专栏：又见苍岚又见苍岚

运行总次数：0

代码可运行

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>
    <% } %>