JavaScript模板引擎

来源：互联网发布：java excel导入导出编辑：程序博客网时间：2024/06/02 21:27

参考文献：

高性能JavaScript模板引擎原理解析:
http://cdc.tencent.com/2012/06/15/%e9%ab%98%e6%80%a7%e8%83%bdjavascript%e6%a8%a1%e6%9d%bf%e5%bc%95%e6%93%8e%e5%8e%9f%e7%90%86%e8%a7%a3%e6%9e%90/

art-template: https://aui.github.io/art-template/docs/

github:https: //github.com/aui/art-template

JavaScript 的模板引擎是什么：https://www.zhihu.com/question/53133191/answer/133811281

随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。

简单来讲，模板引擎就是为了让动态页面渲染的时候，可以简化字符串的拼接操作的东西。比如我们需要在页面渲染一个列表：

<li>111</li><li>222</li><li>333</li>

列表中的数据是动态获取的一个数组data=['111','222','333']。
那么我们直接用代码写，需要循环data，然后拼接每一个li的数据。
写惯了页面的同学，希望把代码逻辑直接写在一个html里面，只要更换数据源，就能输出不同的页面代码了。
比如我们可以这样写：

for(var i = 0; i < this.list.length; i++){  <li>this.list[i]</li>}

当更换this.list的数据后，就可以获得不同的结果了。
但是这样的代码，是没法区分哪里是逻辑代码，哪里是html本身的代码的。所以我们加入了一些标记符，我们这里用<% %>来包裹住逻辑代码。

<%for(var i = 0; i < this.list.length; i++){%>  <li><%=this.list[i]%></li><%}%>

这段代码我们可以加在script标签内，修改type为text/html或者其它格式，在需要使用的时候，通过dom获取到里面的文本内容。
如果js可以理解这段代码，就可以通过变更数据源来更新模板内容了。

简单原理如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body><!-- 定义一个模板文件 --><script id="mytemp" type="text/html"><ul><% for(var i=0; i<data.length; i++) { %><li><span><%= data[i].username %></span></li><% } %></ul></script><script type="text/javascript">function template(id, data) {var str = document.getElementById(id).innerText;str = "log(`"+str+"`)";//将整个模板使用log函数包围str = str.replace(/<%=(.+)%>/g, "`); log($1); log(`");//处理<%= %>情况//处理<%- %>情况,如src=<%- data[i].url %>str = str.replace(/<%-(.+)%>/g, "`) ;log($1); log(`");str = str.replace(/<%(.+)%>/g, "`); $1 log(`");//处理<% %>情况console.log("处理后的str\n",str);//使用``为了获取处理后的strvar funcstr = `   (function(data){var htmlstr = "";function log(str) {htmlstr += str;}${str};return htmlstr;})`;console.log("拼接成可被eval解析的代码，其类型是"+typeof funcstr,funcstr);var realfunc = eval(funcstr); //使用eval解析可执行的代码console.log("eval解析字符串后生成的可执行代码,即函数",realfunc);var res = realfunc(data);console.log("执行函数返回的html字符串",res);return res;}//通过调用template方法，向指定模板中填充数据，并返回html文本内容var htmltext = template("mytemp", [{url: "xxxx", username:"yt"}, {url:"zzzzz", username: "mt"}]);document.body.innerHTML = htmltext;</script></html>

阅读全文

0 0