Detailed explanation of EJS template engine examples
前面的话
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);//<div>123</div>如果不希望变量值的内容被转义，那就这么用<%-... %>输出变量
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
The above is the detailed content of Detailed explanation of EJS template engine examples. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to add PPT mask
Mar 20, 2024 pm 12:28 PM
Regarding PPT masking, many people must be unfamiliar with it. Most people do not understand it thoroughly when making PPT, but just make it up to make what they like. Therefore, many people do not know what PPT masking means, nor do they understand it. I know what this mask does, and I don’t even know that it can make the picture less monotonous. Friends who want to learn, come and learn, and add some PPT masks to your PPT pictures. Make it less monotonous. So, how to add a PPT mask? Please read below. 1. First we open PPT, select a blank picture, then right-click [Set Background Format] and select a solid color. 2. Click [Insert], word art, enter the word 3. Click [Insert], click [Shape]
Effects of C++ template specialization on function overloading and overriding
Apr 20, 2024 am 09:09 AM
C++ template specializations affect function overloading and rewriting: Function overloading: Specialized versions can provide different implementations of a specific type, thus affecting the functions the compiler chooses to call. Function overriding: The specialized version in the derived class will override the template function in the base class, affecting the behavior of the derived class object when calling the function.
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
Actual test of NVIDIA AI game engine: real-time chat with NPC, Chinese is fluent
Mar 04, 2024 am 09:40 AM
The intelligent NPC created by Academician Huang in "Cyberpunk 2077" can already speak Chinese? Qubit's first-hand experience, witnessing NPCs conversing fluently in both Chinese and English, with natural expressions and movements, and matching mouth shapes... If there wasn't a screen in front of me, it would really feel like being there. . At this year's CES exhibition, Nvidia used its intelligent engine Avatar Cloud Engine (ACE) to make game NPCs "alive", which caused quite a shock. △The intelligent NPC displayed at CES uses ACE. The characters in the game can have realistic voice conversations with players, while showing vivid expressions and body movements without having to prepare a script in advance. At the time of its debut, there were Ubisoft, Tencent, NetEase, MiHoYo and other countries.
