ejs服务端渲染从入门到放弃

最新推荐文章于 2024-09-28 15:33:59 发布

xjl271314

最新推荐文章于 2024-09-28 15:33:59 发布

阅读量4.8k

点赞数 2

分类专栏：后端开发文章标签： ejs 服务端渲染 javascript

本文链接：https://blog.csdn.net/xjl271314/article/details/80562990

版权

后端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最开始的Web基本上都是一个后端来搞定的，负责写html模板，然后负责后台的业务操作，后来出现了前后端分离，现在前端又得开始掌握一些服务端渲染的知识了，真是永远在努力跟上时代的脚步。

这篇文章主要讲解了一些笔者关于学习ejs从入门到放弃的一些感悟。

什么是ejs？

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

为什么又回归到服务端渲染？

优点：

1.SEO，让搜索引擎更容易读取页面内容
2.首屏渲染速度更快（重点），无需等待js文件下载执行的过程
3.更易于维护，服务端和客户端可以共享某些代码

在推崇前后端分离的情况下又回归服务端渲染主要是项目中初次渲染比较慢或者说需要SEO的原因。

ejs渲染模板看起来是什么样子的？


//这种写法和php,C#的写法非常类似
<h1><%=title %></h1>
 <ul>

 <% for (var i=0; i<supplies.length; i++) { %>

<li> <a href= 'supplies/<%=supplies[i] %>' >

<%= supplies[i] %></a>

 </li>

 <% } %>
 </ul>


//前端页面

<html >
 < head>
 <script type="text/javascript" src = "/js/ejs.js"></script>
 <script type ="text/javascript" >
   function myfunction(){
var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'

var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));

//JSON.parse(data) 把JSON字符串解析为原生的javascript值。

 alert(html);

document.getElementById("div1").innerHTML=html;
 }
 </script >
 </ head >
 <body>
 <button  onclick = "myfunction()" >点击</button>
 < div id = "div1" ></div >
 </body >
 < html >

语法和功能

<% %> 用于控制流，简单的来说就是类似php代码的<?php ?>,表示的是这是一段代码片段，里面可以书写js代码。
<%= %> 用于转义的输出,比如上述的<h1><%=title %></h1>然后我们在数据中传入了title，title就会被显示在h1标签中。

那么如何显示字符串呢？

<h1><%='title' %></h1> 字符写成字符串就可以正常显示字符串。
<h1><%=<span style={{color:'red'}}>'title'</span> %></h1> 里面还可以书写html元素。
<%- 输出非转义的数据到模板，类似就是注释了一样，本身不会执行。<h1><%-title %>asd</h1>最后的输出就是asd。
<%# 注释标签，不执行、不输出内容<h2><%# aaa %></h2>不输出任何内容。
<%_ 删除其前面的空格符，<h2><%_ 123%></h2>输出123。
_%> 将结束标签后面的空格符删除。
支持自定义标签，比如’<%’可以使用’{{‘，’%>’用’}}’代替；ejs 里，默认的闭合标记是 <% .. %>，我们也可以定义自己的标签。例如：
app.set(“view options”,{ “open”:”{{“, “close”:”}}”});
提供一些辅助函数，用于模版中使用：
1)、first，返回数组的第一个元素；
2)、last，返回数组的最后一个元素；
3)、capitalize，返回首字母大写的字符串；
4)、downcase，返回字符串的小写；
5)、upcase，返回字符串的大写；
6)、sort，排序（Object.create(obj).sort()？）；
7)、sort_by:’prop’，按照指定的prop属性进行升序排序；
8)、size，返回长度，即length属性，不一定非是数组才行；
9)、plus:n，加上n，将转化为Number进行运算；
10)、minus:n，减去n，将转化为Number进行运算；
11)、times:n，乘以n，将转化为Number进行运算；
12)、divided_by:n，除以n，将转化为Number进行运算；
13)、join:’val’，将数组用’val’最为分隔符，进行合并成一个字符串；
14)、truncate:n，截取前n个字符，超过长度时，将返回一个副本
15)、truncate_words:n，取得字符串中的前n个word，word以空格进行分割；
16)、replace:pattern,substitution，字符串替换，substitution不提供将删除匹配的子串；
17)、prepend:val，如果操作数为数组，则进行合并；为字符串则添加val在前面；
18)、append:val，如果操作数为数组，则进行合并；为字符串则添加val在后面；
19)、map:’prop’，返回对象数组中属性为prop的值组成的数组；
20)、reverse，翻转数组或字符串；
21)、get:’prop’，取得属性为’prop’的值；
22)、json，转化为json格式字符串
可以使用模板加载，通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。<%- include filename %> filename是需要引入的模板的文件名。

如何自定义模板进行渲染？

之前我们直接调用一个写好的文件进行渲染模板

new EJS({url: '/js/tmpl/cleaning.ejs'})

ejs对象有下面两个成员函数：

1、ejs.compile(str, options); 将返回内部解析好的Function函数
2、ejs.render(str, options); 返回经过解析的字符串

ejs.compile(str, options)，第一个参数str：需要解析的字符串模板，第二个参数option：其他参数

const template = ejs.compile('<%=123 %>');
var result = template();
console.log(result);//123

ejs.render(str, options); 第一个参数str：需要解析的字符串模板，第二个参数option：其他参数

ejs.render(str,option);  
 // 渲染字符串 str 一般是通过nodejs文件系统的readfile方法读取 

 ejs.render(str,{  

     data : user_data  
     // 需要渲染的数据 

  });

两个函数的公用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 移除多余空格

看到这里，大概是基本上入门ejs语法和使用方法了，由于我的业务框架主要是react,现在我要放弃ejs而去拥抱next.js了，这里附一个next.js学习文档，还是比较基出比较完善的入门文档。next.js快速入门

xjl271314

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录