首页 > 作文

基于JavaScript写一款EJS模板引擎

更新时间:2023-04-05 00:29:09 阅读: 评论:0

目录
1. 起因2. 基本语法实现3. function函数4 with5. ejs语句6. 标签转义

1. 起因

部门最近的一次分享中,有人提出来要实现一个ejs模板引擎,突然发现之前似乎从来都没有考虑过这个问题,一直都是直接拿过来用的。那就动手实现一下吧。本文主要介绍ejs的简单使用,并非全部实现,其中涉及到options配置的部分直接省略了。如有不对请指出,最后欢迎点赞 + 收藏。

2. 基本语法实现

定义render函数,接收html字符串,和data参数。

const render = (ejs = '', data = {}) => {}

事例模板字符串如下:

<body>  <div><%= name %></div>  <div><%= age %></div></body>

可以使用正则将<%= name %>匹配出来,只保留name。这里借助es6的模板字符串。将name用${}包裹起来。

props中第2个值就是匹配到的变量。直接props[1]替换。

[ '<%= name %>', ' name ', 16, '<body>\n  <div><%= name %></div>\n  <div><%= age %></div>\n</body>']
const render = (ejs = '', data = {}) => {  const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {    return '${' + props[1] + '}';    // return data[props[1].trim()];  });}

3. function函数

这里得到的html是一个模板字符串。可以通过function将字符串编程可执行的函数。当然这里也可以使孩子厌学用eval,随你。

<body>  <div>${ name }</div>  <div>${ age }</div></body>

function是一个构造函数,实例化后返回一个真正的函数,构造函数的最后一个参数是函数体的字符串,前面的参数都为形式参数。比如这里传入形参name,函数体通过console.log打印一句话。

const func = new function('name', 'console.log("我是通过function构建的函数,我叫:" + name)');// 执行函数,传入参数func('yindong'); // 我是通过function构建的函数,我叫:yindong

利用function的能力可以将html模板字符串执行返回。函数字符串编写return,返回一个拼装好的模板字符串、

const gethtml = (html, data) => {  const func = new function('data', `return \`${html}\`;`);  return func(data);  // return eval(`((data) => { return \`${html}\`; })(data)`)}const render = (ejs = '', data = {}) => {  const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {    return '${' + props[1] + '}';  });  return gethtml(html, data);}

4 with

这里render函数中props[1]的实际上是变量名称,也就是name和age,可以替换成data[props[1].trim()],不过这样写会有一些问题,偷个懒利用with代码块的特性。

with语句蝙蝠小子用于扩展一个语句的作用域链。换句人话来说就是在with语句中使用的变量都会先在with中寻找,找不到才会向上寻找。

比如这里定义一个age数字和data对象,data中包含一个name字符串。with包裹的代码块中输出的name会先在data中寻找,age在data中并不存在,则会向上寻找。当然这个特性也是一个with不推荐使用的原因,因为不确定with语句中出现的变量是否是data中。

const age = 18;const data = {  name: 'yindong'}with(data) {  console.log(name);  console.log(age);}

这里使用with改造一下gethtml函数。函数体用with包裹起来,data就是传入的参数data,这样with体中的所有使用的变量都从data中查找了。

const gethtml = (html, data) => {  const func = new function('data', `with(data) { return \`${html}\`; }`);  return func(data);  // return eval(`((data) => { with(data) { return \`${html}\`; } })(data)`)}const render = (ejs = '', data = {}) => {  // 优化一下代码,直接用$1替代props[1];  // const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {  //   return '${' + props[1] + '}';  // });  const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');  return gethtml(html, data);}

这样就可以打印出真是的html了。

<body>  <div>yindong</div>  <div>18</div></body>

5. ejs语句

这里扩展一下ejs,加上一个arr.join语句。

<body>  <div><%= name %></div>  <div><%= age %></div>  <div><%= arr.join('--') %></div></body>
const data = {  name: "yindong",  age: 18,  arr: [1, 2, 3, 4]}const html = fs.readfilesync('./html.ejs', 'utf-8');const gethtml = (html, data) => {  const func = new function('data', ` with(data) { return \`${html}\`; }`);  return func(data);}const render = (ejs = '', data = {}) => {  const html = html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');  return gethtml(html, data);}const result = render(html, data);console.log(result);

可以发现ejs也是可以正常编译的。因为模板字符串支持arr.join语法,输出:

<body>  <div>yindong</div>  <div>18</div>  <div>1--2--3--4</div></body>

如果ejs中包含foreach语句,就比较复杂了。此时render函数就无法正常解析。

<body>  <div><%= name %></div>  <div><%= age %></div>  <% arr.foreach((item) => {%>    <div><%= item %></div>  <%})%></body>

这里分两步来处理。仔细观察可以发现,使用变量值得方式存在=号,而语句是没有=号的。可以对ejs字符串进行第一步处理,将<%=变量替换成对应的变量,也就是原本的render函数代码不变。

const render = (ejs = '', data = {}) => {  const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');  console.log(html);}
<body>  <div>${ name }</div>  <div>${ age }</div>  <% arr.foreach((item) => {%>    <div>${ item }</div>  <%})%></body>

第二步比较绕一点,可以将上面的字符串处理成多个字符串拼接。简单举例,将a加上arr.foreach的结果再加上c转换为,str存储a,再拼接arr.foreach每项结果,再拼接c。这样就可以获得正确的字符串了。

// 原始字符串retrun `  a  <% arr.foreach((item) => {%>    item  <%})%>  c`// 拼接后的let str;str = `a`;arr.foreach((item) => {  str += 个性游戏昵称item;});str += c;return str;

在第一步的结果上使用/<%(.*?)%>/g正则匹配出<%%>中间的内容,也就是第二步。

const render = (ejs = '', data = {}) => {  // 第一步  let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');  // 第二步  html = html.replace(/<%(.*?)%>/g, (...props) => {    return '`\r\n' + props[1] + '\r\n str += `';  });  console.log(html);}

替换后得到的字符串长成这个样子。

<body>  <div>${ name }</div>  <div>${ age }</div>  `arr.foreach((item) => {str += `    <div>${ item }</div>  `})str += `</body>

添加换行会更容易看一些。可以发现,第一部分是缺少首部`的字符串,第二部分是用str存储了foreach循环内容的完整js部分,并且可执行。第三部分是缺少尾部`的字符串。

<body>  <div>${ name }</div>  <div>${ age }</div>  `// 第二部分arr.foreach((item) => {str += `    <div>${ item }</div>  `})// 第三部分str += `</body>

处理一下将字符串补齐,在第一部分添加let str = `,这样就是一个完整的字串了,第二部分不需要处理,会再第一部分基础上拼接上第二部分的执行结果,第三部分需要在结尾出拼接`; return str; 也就是补齐尾部的模板字符串,并且通过return返回str完整字符串。

// 第一部分let str = `<body>  <div>${ name }</div>  <div>${ age }</div>  `// 第二部分arr.foreach((item) => {str += `    <div>${ item }</div>  `})// 第三部分str += `</body>`;return str;

这部分逻辑可以在gethtml函数中添加,首先在with中定义str用于存储第一部分的字符串,尾部通过return返回str字符串。

const gethtml = (html, data) => {  const func = new function('data', ` with(data) { let str = \`${html}\`; return str; }`);  return func(data);}

这样就可以实现执行ejs语句了。

const data = {  name: "yindong",  age: 18,  arr: [1, 2, 3, 4],  html: '<div>html</div>',  escape: '<div>escape</div>'}const html = fs.readfilesync('./html.ejs', 'utf-8');const gethtml = (html, data) => {  const func = new function('data', ` with(data) { var str = \`${html}\`; return str; }`);  return func(data);}const render = (ejs = '', data = {}) => {  // 替换所有变量  let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');  // 拼接字符串  html = html.replace(/<%(.*?)%>/g, (...props) => {    return '`\r\n' + props[1] + '\r\n str += `';  });  return gethtml(html, data);}const result = render(html, data);console.log(result);

输出结果:

<body>
<div>yindong</div>
<div>18</div>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</《竹里馆》div>

</body>

6. 标签转义

<%=会对传入的html进行转义,这里编写一个escapehtml转义函数。

const escapehtml = (str) => {  if (typeof str === 'string') {    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g, """).replace(/'/g, "'");  } el {    return str;  }}

变量替换的时候使用escapehtml函数处理变量。这里通过\s*去掉空格。为了避免命名冲突,这里将escapehtml改造成自执行函数,函数参数为$1变量名。

const render = (ejs = '', data = {}) => {  // 替换转移变量  // let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapehtml($1)}');  let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, `${    ((str) => {      if (typeof str === 'string') {        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g, """).replace(/'/g, "'");      } el {        return str;      }    })($1)  }`);  // 拼接字符串  html = html.replace(/<%(.*?)%>/g, (...props) => {    return '`\r\n' poc是什么意思+ props[1] + '\r\n str += `';  });  return gethtml(html, data);}

gethtml函数不变。

const gethtml = (html, data) => {  const func = new function('data', `with(data) { var str = \`${html}\`; return str; }`);  return func(data);}

<%-会保留原本格式输出,只需要再加一条不使用escapehtml函数处理的就可以了。

const render = (ejs = '', data = {}) => {  // 替换转义变量  let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapehtml($1)}');  // 替换其余变量  html = html.replace(/<%-(.*?)%>/gi, '${$1}');  // 拼接字符串  html = html.replace(/<%(.*?)%>/g, (...props) => {    return '`\r\n' + props[1] + '\r\n str += `';  });  return gethtml(html, data, escapehtml);}

输出样式:

<body>
<div>yindong</div>
<div>18</div>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>&lt;div&gt;escapehtml&lt;/div&gt;</div>
</body>

至此一个简单的ejs模板解释器就写完了。

到此这篇关于基于javascript写一款ejs模板引擎的文章就介绍到这了,更多相关写一款ejs模板引擎内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-05 00:29:07,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/ee7475c2cac9a358d40f78105b11ae98.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:基于JavaScript写一款EJS模板引擎.doc

本文 PDF 下载地址:基于JavaScript写一款EJS模板引擎.pdf

标签:字符串   函数   变量   语句
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图