ejs概述

栏目: CSS · 发布时间: 5年前

内容简介：在web项目中渲染页面，我们很多时候，会用json或者拼接字符串的方式，不够美观，破坏原有html结构，大量的html拼接会使代码难以阅读。ejs是一种nodejs模板引擎，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装。ejs的特点：

概述

在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

常用标签

<%
<%_
<%=
<%-
<%#
<%%
%>
-%>
_%>

### 基本语法

变量
变量声明： <% 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>