ejs基本语法理解和运用

mac2022-06-30 28

一、标签语义

1、基础标签

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

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

输出需要输出标签：

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

html代码部分：

输出结果展示：

2、输出标签

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

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

html代码部分：

输出结果：

3、清除空格标签

删除前后的空格符，不过又多中表达方式，可以删除前面，删除后面，或者删除前后空格符 **<%_ _%>**

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

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

4、无转义标签

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

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

输出结果展示：

5、注释标签

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

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

展示输出结果：

6、字符串标签

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

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

展示结果：

二、基础语法

1、模板内容渲染

模板内容渲染有两种方式，一种是上面已经存在的，另外一个类似art-templaterender 输出的是解析后的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

展示结果：

2、模板文件渲染

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

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

现在我们创建一个file文件，用来读取 file.html

返回原文件

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

三、包含指令

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 语法:<%- include(filename, data) %> 使用报错了，不知道什么原因。这个我在express的客户端测试了一下，可以实现，估计应该是只能在服务器端实现。

四、自定义分隔符

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

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

展示结果：

五、CSS()

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

六、js()

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

七、img()占位符

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

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

八、text() 占位文本

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

转载于:https://www.cnblogs.com/zjh-study/p/10640707.html

最新回复(0)