经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
基于JavaScript写一款EJS模板引擎
来源:jb51  时间:2022/2/14 11:35:44  对本文有异议

1. 起因

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

2. 基本语法实现

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

  1. const render = (ejs = '', data = {}) => {
  2.  
  3. }

事例模板字符串如下:

  1. <body>
  2. ? ? <div><%= name %></div>
  3. ? ? <div><%= age %></div>
  4. </body>

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

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

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

3. Function函数

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

  1. <body>
  2. ? ? <div>${ name }</div>
  3. ? ? <div>${ age }</div>
  4. </body>

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

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

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

  1. const getHtml = (html, data) => {
  2. ? ? const func = new Function('data', `return \`${html}\`;`);
  3. ? ? return func(data);
  4. ? ? // return eval(`((data) => { ?return \`${html}\`; })(data)`)
  5. }
  6.  
  7. const render = (ejs = '', data = {}) => {
  8. ? ? const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
  9. ? ? ? ? return '${' + props[1] + '}';
  10. ? ? });
  11. ? ? return getHtml(html, data);
  12. }

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中。

  1. const age = 18;
  2. const data = {
  3. ? ? name: 'yindong'
  4. }
  5.  
  6. with(data) {
  7. ? ? console.log(name);
  8. ? ? console.log(age);
  9. }

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

  1. const getHtml = (html, data) => {
  2. ? ? const func = new Function('data', `with(data) { return \`${html}\`; }`);
  3. ? ? return func(data);
  4. ? ? // return eval(`((data) => { with(data) { return \`${html}\`; } })(data)`)
  5. }
  6.  
  7. const render = (ejs = '', data = {}) => {
  8. ? ? // 优化一下代码,直接用$1替代props[1];
  9. ? ? // const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
  10. ? ? // ? ? return '${' + props[1] + '}';
  11. ? ? // });
  12. ? ? const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
  13. ? ? return getHtml(html, data);
  14. }

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

  1. <body>
  2. ? ? <div>yindong</div>
  3. ? ? <div>18</div>
  4. </body>

5. ejs语句

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

  1. <body>
  2. ? ? <div><%= name %></div>
  3. ? ? <div><%= age %></div>
  4. ? ? <div><%= arr.join('--') %></div>
  5. </body>
  1. const data = {
  2. ? ? name: "yindong",
  3. ? ? age: 18,
  4. ? ? arr: [1, 2, 3, 4]
  5. }
  6.  
  7. const html = fs.readFileSync('./html.ejs', 'utf-8');
  8.  
  9. const getHtml = (html, data) => {
  10. ? ? const func = new Function('data', ` with(data) { return \`${html}\`; }`);
  11. ? ? return func(data);
  12. }
  13.  
  14. const render = (ejs = '', data = {}) => {
  15. ? ? const html = html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
  16. ? ? return getHtml(html, data);
  17. }
  18.  
  19. const result = render(html, data);
  20.  
  21. console.log(result);

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

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

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

  1. <body>
  2. ? ? <div><%= name %></div>
  3. ? ? <div><%= age %></div>
  4. ? ? <% arr.forEach((item) => {%>
  5. ? ? ? ? <div><%= item %></div>
  6. ? ? <%})%>
  7. </body>

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

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

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

  1. // 原始字符串
  2. retrun `
  3. ? ? a
  4. ? ? <% arr.forEach((item) => {%>
  5. ? ? ? ? item
  6. ? ? <%})%>
  7. ? ? c
  8. `
  9. // 拼接后的
  10. let str;
  11. str = `a`;
  12.  
  13. arr.forEach((item) => {
  14. ? ? str += item;
  15. });
  16.  
  17. str += c;
  18.  
  19. return str;


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

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

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

  1. <body>
  2. ? ? <div>${ name }</div>
  3. ? ? <div>${ age }</div>
  4. ? ? `
  5. ?arr.forEach((item) => {
  6. ?str += `
  7. ? ? ? ? <div>${ item }</div>
  8. ? ? `
  9. })
  10. ?str += `
  11. </body>

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

  1. <body>
  2. ? ? <div>${ name }</div>
  3. ? ? <div>${ age }</div>
  4. ? ? `
  5.  
  6. // 第二部分
  7. ?arr.forEach((item) => {
  8. ?str += `
  9. ? ? ? ? <div>${ item }</div>
  10. ? ? `
  11. })
  12.  
  13. // 第三部分
  14. ?str += `
  15. </body>

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

  1. // 第一部分
  2.  
  3. let str = `<body>
  4. ? ? <div>${ name }</div>
  5. ? ? <div>${ age }</div>
  6. ? ? `
  7.  
  8. // 第二部分
  9. ?arr.forEach((item) => {
  10. ?str += `
  11. ? ? ? ? <div>${ item }</div>
  12. ? ? `
  13. })
  14.  
  15. // 第三部分
  16. ?str += `
  17. </body>
  18. `;
  19.  
  20. return str;

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

  1. const getHtml = (html, data) => {
  2. ? ? const func = new Function('data', ` with(data) { let str = \`${html}\`; return str; }`);
  3. ? ? return func(data);
  4. }

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

  1. const data = {
  2. ? ? name: "yindong",
  3. ? ? age: 18,
  4. ? ? arr: [1, 2, 3, 4],
  5. ? ? html: '<div>html</div>',
  6. ? ? escape: '<div>escape</div>'
  7. }
  8.  
  9. const html = fs.readFileSync('./html.ejs', 'utf-8');
  10.  
  11. const getHtml = (html, data) => {
  12. ? ? const func = new Function('data', ` with(data) { var str = \`${html}\`; return str; }`);
  13. ? ? return func(data);
  14. }
  15.  
  16. const render = (ejs = '', data = {}) => {
  17. ? ? // 替换所有变量
  18. ? ? let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
  19. ? ? // 拼接字符串
  20. ? ? html = html.replace(/<%(.*?)%>/g, (...props) => {
  21. ? ? ? ? return '`\r\n' + props[1] + '\r\n str += `';
  22. ? ? });
  23. ? ? return getHtml(html, data);
  24. }
  25.  
  26. const result = render(html, data);
  27.  
  28. 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转义函数。

  1. const escapeHTML = (str) => {
  2. ? ? if (typeof str === 'string') {
  3. ? ? ? ? return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g, "&#34;").replace(/'/g, "&#39;");
  4. ? ? } else {
  5. ? ? ? ? return str;
  6. ? ? }
  7. }

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

  1. const render = (ejs = '', data = {}) => {
  2. ? ? // 替换转移变量
  3. ? ? // let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
  4. ? ? let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, `\${
  5. ? ? ? ? ((str) => {
  6. ? ? ? ? ? ? if (typeof str === 'string') {
  7. ? ? ? ? ? ? ? ? return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g, "&#34;").replace(/'/g, "&#39;");
  8. ? ? ? ? ? ? } else {
  9. ? ? ? ? ? ? ? ? return str;
  10. ? ? ? ? ? ? }
  11. ? ? ? ? })($1)
  12. ? ? }`);
  13. ? ? // 拼接字符串
  14. ? ? html = html.replace(/<%(.*?)%>/g, (...props) => {
  15. ? ? ? ? return '`\r\n' + props[1] + '\r\n str += `';
  16. ? ? });
  17. ? ? return getHtml(html, data);
  18. }

getHtml函数不变。

  1. const getHtml = (html, data) => {
  2. ? ? const func = new Function('data', `with(data) { var str = \`${html}\`; return str; }`);
  3. ? ? return func(data);
  4. }

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

  1. const render = (ejs = '', data = {}) => {
  2. ? ? // 替换转义变量
  3. ? ? let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
  4. ? ? // 替换其余变量
  5. ? ? html = html.replace(/<%-(.*?)%>/gi, '${$1}');
  6. ? ? // 拼接字符串
  7. ? ? html = html.replace(/<%(.*?)%>/g, (...props) => {
  8. ? ? ? ? return '`\r\n' + props[1] + '\r\n str += `';
  9. ? ? });
  10. ? ? return getHtml(html, data, escapeHTML);
  11. }

输出样式:

<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模板引擎内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号