ejs基本语法理解和运用

时间 2019-11-30

标签 ejs 基本语法理解运用繁體版

原文原文链接

1、标签语义

一、基础标签

基础标签，顾名思义能够理解为其余标签的基础，都是在这个标签上面的拓展，中间的内容数据记得先后要空一格
text前面半部分为开始标签，后半部分为结束标签
<% text %>
案例css

// 里面输入script标签，用于控制流，没有输出
<% var name="测试" %>

输出须要输出标签：html

let html = ejs.render('<% var name="测试" %><%= name %>', {});
document.getElementById('app').innerHTML = html

html代码部分：前端

<div id="app"></div>

输出结果展现：
express

二、输出标签

将值输出到模板中，会将html转义，输出的是解析事后的html字符串
<%= name %>
案例数组

let people = ['geddy', 'neil', 'alex']
html = ejs.render('<%= people.join(" | "); %>', {people: people})
document.getElementById('app').innerHTML = html

html代码部分：缓存

<div id="app"></div>

输出结果：
安全

三、清除空格标签

删除先后的空格符，不过又多中表达方式，能够删除前面，删除后面，或者删除先后空格符
**<%_ _%>**服务器

<%_    => // 官方说的是清除前面的空格符
_%>    => // 官方说的是清除结束标签后面的空格符

这个暂时不知道怎么用，网上也没找到使用的例子？有大佬知道能够指导一下。app

四、无转义标签

顾名思义，这个就是将标签里面的内容不做转义输出，原来是什么样，就输出什么样
<%- %>
注意这里：有个-%>的结束标签，这个标签的含义是删除紧随其后的换行符
这个标签通常和include结合使用，用于引入其余模板块，好比公共样式部分函数

let html = ejs.render('<%- "<div>你好啊</div>" %>', {})
document.getElementById('app').innerHTML = html

输出结果展现：

五、注释标签

就跟日常的注释符相似，只是做为注释，不会输出，也不会执行
<%# "注释内容" %>

html = ejs.render('<%# "这是一段注释内容" %><%= "这才是真正输出内容" %>', {people: people})
document.getElementById('app').innerHTML = html

展现输出结果：

六、字符串标签

输出字符串用，它会解析html代码为字符串，可是会在输出的字符串先后加上<% %>
<%% %>

html = ejs.render('<%% <div>输出字符串</div> %>', {people: people})
document.getElementById('app').innerHTML = html

展现结果：

2、基础语法

一、模板内容渲染

模板内容渲染有两种方式，一种是上面已经存在的，另一个相似art-template
render
输出的是解析后的html字符串
语法:ejs.render(str,data,options)

参数	参数说明
str	这个是用来渲染的数据展现区域
data	这个是渲染的数据,能够是对象或者数组
opstions	这是个额外的参数配置,能够省略,详见后面

let peoples = ['geddy', 'neil', 'alex']
let html = ejs.render('<%= peoples.join(" | ") %>', peoples)
document.getElementById('app').innerHTML = html

输出展现结果：

compile
输出的是解析后的html字符串
语法:ejs.compile(str,options);

参数	参数说明
str	这个是用来渲染的数据展现区域
opstions	这是个额外的参数配置,能够省略,详见后面

let people = ['geddy', 'neil', 'alex']
let template = ejs.compile('<%= people.join(" | ") %>')
let html = template(people)
document.getElementById('app').innerHTML = html

展现结果：

二、模板文件渲染

读取文件，渲染文件里面的内容，输出解析后的html字符串
renderFile()
语法:ejs.renderFile(filename,data,options,function(err,str){})

参数	参数说明
str	这个是用来渲染的数据展现区域
data	这个是渲染的数据,能够是对象或者数组
opstions	这是个额外的参数配置,能够省略,详见后面
filename	这个是须要读取渲染的文件路径,官方真是坑爹
err	读取渲染失败的提示

如今咱们建立一个file文件，用来读取
file.html

<div id="file">
   <p>登陆名:<%= name %></p>
   <p>登陆密码:<%= pwd %></p>
</div>

返回原文件

let people = ['geddy', 'neil', 'alex']
  ejs.renderFile('./file.html',{name: 'root',pwd: '123456'},function (err, str) {
    if (err) {
      console.log(err)
    } else {
      alert(str)
      document.getElementById('app').innerHTML = str
    }
  })

这个报错了，不知道什么缘由，返回了err，难道是ejs.min.js不支持这种模式
展现结果：

options参数说明

参数	参数说明
cache	缓存编译后的函数，须要提供 filename
filename	被 cache 参数用作键值，同时也用于 include 语句
context	函数执行时的上下文环境
compileDebug	当为 false 时不编译调试语句
client	返回独立的编译后的函数
delimiter	放在角括号中的字符，用于标记标签的开与闭
debug	将生成的函数体输出
_with	是否使用 with() {} 结构。若是为 false，全部局部数据将存储在 locals 对象上
localsName	若是不使用 with ，localsName 将做为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace	删除全部可安全删除的空白字符，包括开始与结尾处的空格。对于全部标签来讲，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)
escape	为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中经过 .toString() 输出。(默认转义 XML)。

3、包含指令

经过 include 指令将相对于模板路径中的模板片断包含进来。(须要提供 'filename' 参数。)
语法:<%- include(filename, data) %>
使用报错了，不知道什么缘由。

这个我在express的客户端测试了一下，能够实现，估计应该是只能在服务器端实现。

4、自定义分隔符

可针对单个模板或全局使用自定义分隔符，这个分隔符的意思是不用像官方指定使用%来分割，你能够自定义符号
局部：

ejs.render('<?=people.join(" | "); ?>', {people: people}, {delimiter: '?'});

全局：

ejs.delimiter = '$';
ejs.render('<$= people.join(" | "); $>', {people: people});

没有声明delimiter时：

let people = ['geddy', 'neil', 'alex']
let html = ejs.render('<$= people.join(" | ") $>',{people: people})
document.getElementById('app').innerHTML = html

展现结果：

有delimiter声明时：

let people = ['geddy', 'neil', 'alex']
let html = ejs.render('<$= people.join(" | ") $>',{people: people}, {delimiter: '$'})
document.getElementById('app').innerHTML = html

展现结果：

5、CSS()

快速的引用 CSS 文件，并附上注释线上 CSS 绝对路径，便于下游前端使用

<head>
    <title>页面标题</title>
    <%- css("style-workflow.css") %>
</head>

6、js()

功能与 css() 一致，不复述

7、img()占位符

占位图，能够指定高、宽，以及 className

<%- img(200, 400, 'block__img') %>

8、text() 占位文本

生成指定长度的占位图，第二个参数为偏移字数

<span><%- text(10, 3) %></span>