ejs概述

jiezi

6 年前

在 web 项目中渲染页面，我们很多时候，会用 json 或者拼接字符串的方式，不够美观，破坏原有 html 结构，大量的 html 拼接会使代码难以阅读。

ejs 是一种 nodejs 模板引擎，通过数据和模板，可以生成 HTML 标记文本。可以说 EJS 是一个 JavaScript 库，EJS 可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用 npm 包安装。

ejs 的特点：

1、快速编译和渲染

2、简单的模板标签

3、自定义标记分隔符

4、支持文本包含

5、支持浏览器端和服务器端

6、模板静态缓存

7、支持 express 视图系统

npm install ejs 命令安装 EJS

ejs.js。将模板字符串和数据作为参数传递给 EJS，HTML 就出来了。

var ejs = require('ejs'),
    test = ['001', '002', '003'],
    html = ejs.render('<%= test.join(", "); %>', {test: test});

ejs 模板文件后缀名 .ejs

ejs 默认是开启模版缓存。这样在一个页面中多次请求模版文件时，只会请求一次

可通过代码设置是否开启缓存：EJS.config({cache: false});// 关闭缓存

ejs.compile(str,[option])

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

ejs.render(ste,data,[option])
```
//str 指需要解析的字符串模板
//data 数据
//option 同上
var result = ejs.render('<%=test %>');
console.log(result);//test
```
常用标签
- <% ‘ 脚本 ’ 标签，用于流程控制，无输出。
- <%_ 删除其前面的空格符
- <%= 输出数据到模板（输出是转义 HTML 标签）
- <%- 输出非转义的数据到模板
- <%# 注释标签，不执行、不输出内容
- <%% 输出字符串 ‘<%’
- %> 一般结束标签
- -%> 删除紧随其后的换行符
- _%> 将结束标签后面的空格符删除

### 基本语法

变量
变量声明：<% title="My First Test" %>

变量输出：<%= title %>

<%- title %>
html 标签属性
变量定义标签属性：<h1 style="<%= style %>"></h1>

循环

<% users=["张三","李四","王五","赵六"] %>
<ul>
   <% for(var item in users){ %>
      <li>
        <%= users[item] %>
      </li>
   <% } %>
</ul>

<% if(isLogin){ %>
    <div class="user">
        <a href="">hello</a>
        <a href=""> 退出 </a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href=""> 登录 </a>
        <a href=""> 注册 </a>
    </div>
<% } %>

include

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。)

<% include 嵌套模板路径 %>
<% include ./header %>

//head.ejs
    <meta charset="utf-8"/>
    <title><%= title %></title>
    <link rel="styleSheet" type="text/css" href="/css/index.css" />
//index.ejs
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <% include ./head %>
        </head>
        <body>
            <main>
                <div>main content</div>
            </main>
        </body>
    </html>

为 express 服务器，设置模板引擎类型
app.set("view engine","ejs");
配置 ejs 模板文件存放路径

app.set('views', path.join(__dirname, 'views'));

将 ejs 模板渲染成 html 页面后返回给浏览器

res.render(path,data)
path: 模板文件路径字符串
渲染模板时需要使用的数据，对象
res.render(“404”)
res.render(“login”,{title:” 用户登录“})

ejs概述

概述

简单示例

基本语法

常用方法

常用标签

在 express 的应用