前面的话
nodejs的模板引擎有很多, EJS是比较简单和容易上手的。本文将详细介绍EJS
概述
EJS是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本。可以说EJS是一个JavaScript库,EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可,服务器端用npm包安装
【安装】
ejs可以配合express框架使用,或直接在node中/浏览器中使用
【特点】
1、快速编译和渲染
2、简单的模板标签
3、自定义标记分隔符
4、支持文本包含
5、支持浏览器端和服务器端
6、模板静态缓存
7、支持express视图系统
用法
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<div id= "div1" ></div>
<script src= "ejs.min.js?1.1.11" ></script>
<script> var html = ejs.render( '<%=123 %>' , '' );
document.getElementById( 'div1' ).innerHTML = html;</script>
</body>
</html>
|
Nach dem Login kopieren
方法
【ejs.compile(str,[option])】
编译字符串得到模板函数,参数如下
1 2 | str:需要解析的字符串模板
option:配置选项
|
Nach dem Login kopieren
1 2 | var template = ejs.compile( '<%=123 %>' ); var result = template();
console.log(result);
|
Nach dem Login kopieren
【ejs.render(str,data,[option])】
直接渲染字符串并生成html,参数如下
1 2 3 | str:需要解析的字符串模板
data:数据
option:配置选项
|
Nach dem Login kopieren
1 2 | var result = ejs.render( '<%=123 %>' );
console.log(result);
|
Nach dem Login kopieren
两个函数包括的配置选项参数options如下:
1 2 3 4 5 6 7 8 9 10 | cache 缓存编译后的函数(ejs.compile(..) ,需要 filename参数作为缓存的key
filename 用于缓存的key,和 include
context 函数的执行上下文
compileDebug 输出compile的信息来跟踪调试
client 返回编译后的函数
delimiter <% .. %> 指这里的%debug 输出ejs.compile()得到函数的函数体
strict ejs.compile()返回的函数是否执行在严格模式
_with 是否使用 with(){..} 来访问本地变量
localsName 保存本地变量的对象名,默认为locals
rmWhitespace 移除多余空格
|
Nach dem Login kopieren
常用标签
【js】
所有使用 <% %> 括起来的内容都会被编译成 Javascript,可以在模版文件中像写js一样Coding
1 2 3 | <% console.log(a); %>
console.log(result);
|
Nach dem Login kopieren
或者,像下面这样写
1 2 | var ejs = require ( 'ejs' ); var result = ejs.render( '<% var a = 123 %><%console.log(a); %>' );
console.log(result);
|
Nach dem Login kopieren
【变量】
用<%=...%>输出变量,变量若包含 '<' '>' '&'等字符会被转义
1 2 | var ejs = require ( 'ejs' ); var result = ejs.render( '<%=a%>' ,{a: '<div>123</div>' });
console.log(result);
|
Nach dem Login kopieren
如果不希望变量值的内容被转义,那就这么用<%-... %>输出变量
1 2 | var ejs = require ( 'ejs' ); var result = ejs.render( '<%-a%>' ,{a: '<div>123</div>' });
console.log(result);
|
Nach dem Login kopieren
【注释】
用<%# some comments %>来注释,不执行不输出
【include】
include 可以引用绝对路径或相对路径的模板文件
由上面的提示可知,使用相对路径时,必须设置'filename'选项
1 2 3 | <% console.log(a); %>
console.log(result);
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für EJS-Vorlagen-Engines. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!