EJS模板引擎

时间 2019-11-12

标签 ejs 模板引擎繁體版

原文原文链接

前面的话

　　nodejs的模板引擎有不少， EJS是比较简单和容易上手的。本文将详细介绍EJShtml

概述

　　EJS是一个简单高效的模板语言，经过数据和模板，能够生成HTML标记文本。能够说EJS是一个JavaScript库，EJS能够同时运行在客户端和服务器端，客户端安装直接引入文件便可，服务器端用npm包安装node

【安装】express

　　ejs能够配合express框架使用，或直接在node中/浏览器中使用npm

$ npm install ejs

【特色】浏览器

　　一、快速编译和渲染缓存

　　二、简单的模板标签服务器

　　三、自定义标记分隔符框架

　　四、支持文本包含函数

　　五、支持浏览器端和服务器端ui

　　六、模板静态缓存

　　七、支持express视图系统

用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1"></div>
<script src="ejs.min.js"></script>
<script>
    var html = ejs.render('<%=123 %>','');
    document.getElementById('div1').innerHTML = html;
</script>
</body>
</html>

方法

【ejs.compile(str,[option])】

　　编译字符串获得模板函数，参数以下

str：须要解析的字符串模板
option：配置选项

var template = ejs.compile('<%=123 %>');
var result = template();
console.log(result);//123

【ejs.render(str,data,[option])】

　　直接渲染字符串并生成html，参数以下

str：须要解析的字符串模板
data：数据
option：配置选项

var result = ejs.render('<%=123 %>');
console.log(result);//123

　　两个函数包括的配置选项参数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 移除多余空格

经常使用标签

【js】

　　全部使用 <% %> 括起来的内容都会被编译成 Javascript，能够在模版文件中像写js同样Coding

//test.ejs
<% var a = 123 %>
<% console.log(a); %>

//test.js
var ejs = require('ejs');
var fs = require('fs');
var data = fs.readFileSync('test.ejs');
var result = ejs.render(data.toString());
console.log(result);//123

　　或者，像下面这样写

var ejs = require('ejs');
var result = ejs.render('<% var a = 123 %><%console.log(a); %>');
console.log(result);//123

【变量】

　　用<%=...%>输出变量，变量若包含 '<' '>' '&'等字符会被转义

var ejs = require('ejs');
var result = ejs.render('<%=a%>',{a:'<div>123</div>'});
console.log(result);//&lt;div&gt;123&lt;/div&gt;

　　若是不但愿变量值的内容被转义，那就这么用<%-... %>输出变量

var ejs = require('ejs');
var result = ejs.render('<%-a%>',{a:'<div>123</div>'});
console.log(result);//<div>123</div>

【注释】

　　用<%# some comments %>来注释，不执行不输出

【include】

　　include 能够引用绝对路径或相对路径的模板文件

//test.ejs
<% var a = 123 %>
<% console.log(a); %>
//test.js
var ejs = require('ejs');var result = ejs.render('<% include test.ejs %>');
//throw new Error('`include` use relative path requires the \'filename\' option.');
console.log(result);

　　由上面的提示可知，使用相对路径时，必须设置'filename'选项

//test.ejs
<% var a = 123 %>
<% console.log(a); %>
//test.js
var ejs = require('ejs');var result = ejs.render('<% include test.ejs %>',{filename:'test.ejs'});
console.log(result);//123

缓存

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

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