简易js模板引擎
前陣子參考別人的文章自己理解了一下模板引擎的實現，雖然是照著敲了一邊，但是自己也加深了理解吧。
原文鏈接
自己的代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表達式</title> </head> <body><div id="app"><% if(this.age>34) {%><p>我的年齡是<% this.age %></p><% } %><div><% name %></div><% for(var m=0;m< this.list.length;m++){ %><p><% this.list[m] %></p><% } %><ul><% for(var pro=0;pro< this.skills.length; pro++){ %><li style="font-size:<% this.age%>px;"><% for(var cit=0;cit< this.skills[pro].city.length;cit++){ %><span><% cit+1 %>:<% this.skills[pro].city[cit] %></span><% } %></li><% } %></ul> </div> <script>/*src:http://www.jb51.net/article/52491.htm* 一個字符串是由n個字符組成的。在每個字符之前和之后，都有一個空字符。這樣，一個由n個字符組成的字符串就有n+1個空字符串。我們來看一下“ABhedeCD”這個字符串：* 所有的e編號的位置都是空字符。表達式(?!hede).會往前查找，看看前面是不是沒有“hede”字串，如果沒有(是其它字符)，那么.(點號)就會匹配這些其它字符。這種正則表* 達式的“查找”也叫做“zero-width-assertions”(零寬度斷言)，因為它不會捕獲任何的字符，只是判斷。在上面的例子里，每個空字符都會檢查其前面的字符串是否不是‘hede'，* 如果不是，這.(點號)就是匹配捕捉這個字符。表達式(?!hede).只執行一次，所以，我們將這個表達式用括號包裹成組(group)，然后用*(星號)修飾——匹配0次或多次：* */let str = `I'm singing while you're dancing.`;let reg = /\b\w+(?=ing)/g;function render(tpl, data) {tpl = tpl.replace(/>/g, '>').replace(/</g, '<');tpl = tpl.replace(/(\n*)/g, '');var reg = /<%([^%>]+)?%>/g;var reg=/<%([^%>]|((?!%>).)*)%>/gvar code = 'var r=[];\n',cursor = 0,match;var reg2 = /(for|{|}|if|else|break|switch|case).*/;var add = function (line, js) {if (!js) {var mm = line.replace(/"/g, '\\"');code += 'r.push("' + mm + '");\n';// 把匹配的第一個標簽放進數組如<p>，以字符串的形式} else {if (reg2.test(line)) {code += line + '\n';} else {code += 'r.push(' + line + ');\n';}// 例如tpl=<p><%name%></p>// match[0]為<%name%>,cursor=0,match.index=3,下一次是11 也就是從</p>的< 開始}}while (match = reg.exec(tpl)) {// match[1]匹配的變量名字add(tpl.slice(cursor, match.index))add(match[1], true);cursor = match.index + match[0].length;console.log(tpl.slice(cursor, match.index))}code += 'r.push("' + tpl.substr(cursor, tpl.length - cursor) + '");\n';code += 'return r.join("")';console.log(code)var result = new Function(code.replace(/[\r\t\n]/g, '')).apply(data);return result;}let data = {name: 'zxf',age: 35,list: ['1', '2', '3'],showSkills: true,skills: [{name:'河南',city:['鄭州','洛陽','新鄉']},{name:'廣州',city:['深圳','東莞','揭陽']}],}document.querySelector('#app').innerHTML = render( document.querySelector('#app').innerHTML, data) </script> </body> </html>
轉載于:https://www.cnblogs.com/fantasy-zxf/p/8144475.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： mongodb mongoose 常用操
- 下一篇： gradle各版本下载地址