EJS学习（三）之语法规则中
⚠️实例均结合node，也就是AMD规范版本
ejs中使用render()表示渲染文本
接收三个参数：模版字符串、data、options，返回一个字符串
const ejs = require('ejs');
ejs.delimiter = '$';
var html = ejs.render(`
<$ for(var i=; i<num; i++ ) { -$>
<h2><$= user.name $>
</h2><h2><$= user.age $></h2>
<$ } -$>`
,{
user:{
name:"wangkun",
age:,
},
num:
},{rmWhitespace:true});
console.log(html);
// 输出：
<h2>wangkun
</h2><h2></h2>
<h2>wangkun
</h2><h2></h2>
ejs中使用renderFile()表示渲染文件
接收四个参数：模版字符串、data、options、callback，没有返回值
const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是错误，data是渲染完的数据
if(err){
console.log("出错了");
}else{
console.log(data);
}
});
ejs中使用<% %>输出脚本
实例一：ejs中的for循环
// 3.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% for(var i=0; i<json.arr.length; i++) {%>
<div>
用户名：<%= json.arr[i].user %>
年龄：<%= json.arr[i].age %>
</div>
<% } %>
</body>
</html> // 3.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/3.ejs',{
json:{
arr:[
{user:"pear",age:"12"},
{user:"apple",age:"13"},
{user:"banana",age:"14"},
{user:"orange",age:"15"}
]
}
},function(err,data){
console.log(data);
}); // 输出： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <div>
用户名：pear
年龄：12
</div> <div>
用户名：apple
年龄：13
</div> <div>
用户名：banana
年龄：14
</div> <div>
用户名：orange
年龄：15
</div> </body>
</html>
⚠️ 所有使用 <% %> 括起来的内容都会被编译成 Javascript，你可以在模版文件中像写 js 一样 Coding，也允许你声明变量，作用域就是当前模版，因为一个模版会被编译成一个 Javascript 函数
ejs中使用<%= %>转义输出
实例一：
// 1.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
我的名字:<%= name %> // 表示赋值
<%= 12+5 %>
<%= 'asdfasdf' %>
</body>
</html> // ejs1.js内容：
const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是错误，data是渲染完的数据
if(err){
console.log("出错了");
}else{
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
我的名字:wangkun
17
asdfasdf
</body>
</html>
实例二：
// 2.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<%= json.arr[0].user %>
<%= json.arr[0].age %>
<%= json.arr[2].user %>
<%= json.arr[2].age %>
</div>
</body>
</html> // 2.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/2.ejs',{
json:{
arr:[
{user:"pear",age:"12"},
{user:"apple",age:"13"},
{user:"banana",age:"14"},
{user:"orange",age:"15"}
]
}
},function(err,data){
console.log(data);
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
pear
12
banana
14
</div>
</body>
</html>
实例三：
// 4.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%
var str = "<div></div>"
%> <%= str %>
</body>
</html> // 4.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/4.ejs',{},function(err,data){
console.log(data);
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <div></div> // ❗️发现是转义的
</body>
</html>
ejs中使用<%- %>非转义输出
// 4.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%
var str = "<div></div>"
%> <%- str %>
</body>
</html> // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <div></div>
</body>
</html>
ejs中使用<%% %>输出模版字符串
// 7.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%% if(user.name) { %>
<%%= user.name %>
<%% } %>
</body>
</html> // 7.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/7.ejs',{
user:{
name:"wangkun",
age:22
}
},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% if(user.name) { %>
<%= user.name %>
<% } %>
</body>
</html>
ejs中使用<%_ _%>删除标签前后的空格
情况一：<%_ 和 _%>一起使用
// 9.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%_ if(user.name) { _%>
<h2><%= user.name _%></h2>
<%_ }else{ _%>
<h2><%= user.age _%></h2>
<%_ } _%>
</body>
</html> // 9.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/9.ejs',{
user:{
name:"wangkun",
age:22
}
},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2> // 注意标签前后没有空格
</body>
</html> // 不使用<%_ _%>输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2> // 注意标签有空格
</body>
</html>
情况二：单独使用<%_
// 9.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%_ if(user.name) { %>
<h2><%= user.name %></h2>
<%_ }else{ %>
<h2><%= user.age %></h2>
<%_ } %>
</body>
</html> // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <h2>wangkun</h2> // 注意标签前后空格没有被删除 </body>
</html>
情况三：单独使用_%>
// 9.ejs内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% if(user.name) { _%>
<h2><%= user.name _%></h2>
<% }else{ _%>
<h2><%= user.age _%></h2>
<% } _%>
</body>
</html> // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2> // 标签前后没有空格，但是样式乱了
</body>
</html>
综合以上三种情况，强烈推荐<%_和_%>一起使用，可以有效删除标签前后空格并且样式不会乱☺️
ejs中使用<% -%>删除换行符
情况一：
// 10.ejs内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% for(var i=0; i<num; i++ ) { -%>
<h2><%= user.name %></h2>
<h2><%= user.age %></h2>
<% } -%>
</body>
</html> // 输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2> // 虽然标签前后空格删除了，但样式乱掉了
<h2>22</h2>
</body>
</html> // 不使用-%>输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2> // 标签前后有空格
<h2>22</h2>
</body>
</html>
情况二：传配置参数rmWhitespace，这样格式就不会乱掉
// 10.ejs内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/10.ejs',{
user:{
name:"wangkun",
age:22,
},
num:2
},{rmWhitespace:true},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2>
<h2>22</h2>
</body>
</html>
ejs中使用<%# %>进行注释没有任何输出
// 8.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%# if(user.name) { %>
<%= user.name %>
<%# } %>
</body>
</html> // 8.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/8.ejs',{
user:{
name:"wangkun",
age:22
}
},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> wangkun </body>
</html>
ejs中使用include引入内容
通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%-
include('user/show'); %> 代码包含后者。你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
情况一：基础，引入文本文件
// 5.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% include a.txt %>
</body>
</html> // a.txt内容：
jidhhdka
kidutyui
iiiiisnhakjdhgagd // 5.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/5.ejs',{},function(err,data){
console.log(data);
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
jidhhdka
kidutyui
iiiiisnhakjdhgagd
</body>
</html>
情况二：配合循环一起使用
// 6.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% for(var i=0; i<5; i++) { %>
<% include a.txt %>
<% } %>
</body>
</html> // 输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd </body>
</html>
情况三：引入css文件
// 7.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 通过type判断引入谁 -->
<% if(type == 'admin') { %>
<% include admin.css %>
<% }else {%>
<% include user.css %>
<% } %>
</body>
</html> // admin.css内容：
div{
width: 800px;
} // user.css内容：
div{
width: 800px;
}
注意：
1、include因为不是js中的语法，所以要单独占据一行
2、include后面不能是变量
3、Include 可以引用相对路径的模版文件，例如有 html/index.html 和 html/_block/head.html这两个文件， 你就可以在 index.html 这么用 <% include _block/head.html %>。
4、如果我们引入的是一个文本那么可以使用<% %>，但是如果是ejs或html为了防止将引入的html转义，我们要使用<%- %>
EJS学习（三）之语法规则中的更多相关文章
- php学习一：语法规则
1.书写规则 在html中嵌入php的时候,需要有结束语,即<?php ...?>,在靠近结束符号的最后一个语句可以不用写分号: 但是在单独的php中,最后可以不用以?>来结尾; 2 ...
- oracle学习 三（持续更新中）
关于ora 01219问题的解决 之前学习oracle的时候练习去建立表空间,建了很多之后手动删除了,之后再使用自己创建的用户名登陆数据库就会造成数据库 ORA-01031: ORACLE initi ...
- 学习h264 的语法规则，如何才能看懂H264 的官方文档
1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...
- JavaWeb学习(三) : 如何在 Eclipse 中创建一个Web 项目并成功运行？
前置条件 : 1.确保已安装 Eclipse.Tomcat 服务器安装包 2.jdk.环境变量都已配置成功. 3.注意在安装 Eclipse 时一定要选择第二个有 Web 项目的进行安装, 不然安装成 ...
- 【 MAKEFILE 编程基础之二】MAKEFILE 书写规划以及语法规则！
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/gcc-makefile/768.html ...
- SCARA——OpenGL入门学习三
OpenGL入门学习[三] 在第二课中,我们学习了如何绘制几何图形,但大家如果多写几个程序,就会发现其实还是有些郁闷之处.例如:点太小,难以看清楚:直线也太细,不舒服:或者想画虚线,但不知道方法只能用 ...
- Jade学习（三）之语法规则下
jade可以自动识别单双标签 // 1.jade内容: input(type="button", value="点击") div // 此时输出❌error:i ...
- Python学习系列（四）Python 入门语法规则2
Python学习系列(四)Python 入门语法规则2 2017-4-3 09:18:04 编码和解码 Unicode.gbk,utf8之间的关系 2.对于py2.7, 如果utf8>gbk, ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- 移动平台对meta标签的定义
一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...
- SUSE zypper 本地源配置
存放repo 文件目录 cd /etc/zypp/repos.d 创建用来存放ISO文件的目录: mkdir /opt/iso 将服务器端的存放ISO文件的目录挂载到本机: mount -t cifs ...
- 重入锁 ReentrantLock （转）（学习记录）
重入锁(ReentrantLock)是一种递归无阻塞的同步机制.以前一直认为它是synchronized的简单替代,而且实现机制也不相差太远.不过最近实践过程中发现它们之间还是有着天壤之别. 以下是官 ...
- PHP中获取数组中单列的值
PHP中获取数组中单列的值如下: 利用PHP中的数组函数 array_column():返回数组中某个单列的值.(PHP 5.5+适用) 语法: array_column(array,column_k ...
- Mac下搭建Vue开发环境
认知: 注:上面的图片转自Vue2.0 新手入门 — 从环境搭建到发布 1.安装brew 打开终端运行以下命令: /usr/bin/ruby -e "$(curl -fsSL https:/ ...
- selenium expected_conditions 源码学习记录
#expected_conditions模块收集了一系列的场景判断方法 #源码地址 # https://seleniumhq.github.io/selenium/docs/api/py/_modul ...
- 003-Spring4 扩展分析-spring类初始化@PostConstruct > InitializingBean > init-method、ApplicationContext、BeanPostProcessor、BeanFactoryPostProcessor、BeanDefinitionRegistryPostProcessor
一.spring类初始化@PostConstruct > InitializingBean > init-method InitializingBean接口为bean提供了初始化方法的方式 ...
- libvirt报错总结
libvirt 的一些报错总结 出现Permission denied error: internal error process exited while connecting to monitor ...
- 2019.11.10【每天学点SAP小知识】Day3 - ABAP 7.40新语法 值转化和值赋值
1.语法为 CONV dTYPE|#(...)\ # 代表任意类型 "7.40之前表达式 . DATA helper TYPE string. DATA xstr TYPE xstring. ...
- Python学习小技巧之列表项的排序
Python学习小技巧之列表项的排序 本文介绍的是关于Python列表项排序的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 典型代码1: data_list = [6, 9, 1, ...