Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Beispiele für EJS-Vorlagen-Engines

Detaillierte Erläuterung der Beispiele für EJS-Vorlagen-Engines

零下一度Original: 2017-06-24 14:51:543678Durchsuche

前面的话

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

概述

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

【安装】

　　ejs可以配合express框架使用，或直接在node中/浏览器中使用

$ npm install ejs

【特点】

　　1、快速编译和渲染

　　2、简单的模板标签

　　3、自定义标记分隔符

　　4、支持文本包含

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

　　6、模板静态缓存

　　7、支持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?1.1.11"></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.jsvar 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.jsvar 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.jsvar ejs = require('ejs');var result = ejs.render('<% include test.ejs %>',{filename:'test.ejs'});
console.log(result);//123

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel-Tutorial für die Installation von NodeJS und NPM unter LinuxNächster Artikel：Beispiel-Tutorial für die Installation von NodeJS und NPM unter Linux

In Verbindung stehende Artikel

Mehr sehen