javaScript系列 [45]-模版编译
2022/1/4 11:08:46
本文主要是介绍javaScript系列 [45]-模版编译,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近有个朋友问
<%=...%>
和{{ Mustache }}
插值语法的一些问题,突然想起以前使用<%=...%>
语法进行模板编译的日子,似乎已经很久远了,刚好有点时间所以写篇文章重新温故下模板编译的处理逻辑。
关键 正则表达式
、eval函数
和字符串拼接
<ul> <% for(var i = 0; i< data.list.length;i++) {%> <li><%= data.list[i] %></li> <% } %> </ul>
给定上面的模板字符串,我们希望能够提供一个模板编译函数,传递数据(data:["a","b","c"])
给该函数以编译出下面的文本标签。
<ul> <li>a</li> <li>b</li> <li>c</li> </ul>
思路 对于上面的字符串模板,如果要编译得到目标字符串,那么关键点在于for循环的处理,这里最简单的办法就是直接通过eval函数
来执行 for循环
部分的代码,而<% 和 %>
等部分则需要通过正则来进行替换。假设,我们在这里提供一个 echo函数
用于做字符串的拼接,那么可以考虑先把模板字符串处理为下面的样式,再行处理。
echo('<ul>'); for(var i = 0; i< data.list.length;i++) { echo('<li>'); echo(data.list[i]); echo('</li>'); } echo('</ul>');
具体实现
/* 1.模板字符串 */ let template = ` <ul> <% for(var i = 0; i< data.list.length;i++) {%> <li><%= data.list[i] %></li> <% } %> </ul> ` /* 2.封装编译函数 */ function compile(template) { /* 2.1 编写正则规则 */ /* 匹配<% %>部分 */ let expr = /<%([\s\S]+?)%>/g; /* 匹配 <%= data.list[i] %> 部分*/ let evalExpr = /<%=(.+?)%>/g; /* 2.2 字符串拼接和正则匹配:$1表示匹配到的原文内容 */ template = template .replace(evalExpr, '`); \n echo($1); \n echo(`') .replace(expr, '`); \n $1 \n echo(`'); /* 2.3 拼接最外层的 echo 函数 */ template = 'echo(`' + template + '`)'; /* 2.4 组装解析函数 */ let script = `(function parse(data){ let output = ""; function echo(html){ output += html.trimEnd(); } ${template} return output; })`; console.log('script', script); return script; } /* 3.生成解析函数 */ let parse = eval(compile(template)); /* 4.注入数据 */ let html = parse({ list: ["a", "b", "c"] }); console.log(html); /* 输出内容: */ /* script (function parse(data){ let output = ""; function echo(html){ output += html.trimEnd(); } echo(` <ul> `); for(var i = 0; i< data.list.length;i++) { echo(` <li>`); echo( data.list[i] ); echo(`</li> `); } echo(` </ul> `) return output; }) ********************************** <ul> <li>a</li> <li>b</li> <li>c</li> </ul> */
这篇关于javaScript系列 [45]-模版编译的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)