简易js模板引擎
前陣子參考別人的文章自己理解了一下模板引擎的實(shí)現(xiàn)，雖然是照著敲了一邊，但是自己也加深了理解吧。
原文鏈接
自己的代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表達(dá)式</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* 一個(gè)字符串是由n個(gè)字符組成的。在每個(gè)字符之前和之后，都有一個(gè)空字符。這樣，一個(gè)由n個(gè)字符組成的字符串就有n+1個(gè)空字符串。我們來(lái)看一下“ABhedeCD”這個(gè)字符串：* 所有的e編號(hào)的位置都是空字符。表達(dá)式(?!hede).會(huì)往前查找，看看前面是不是沒(méi)有“hede”字串，如果沒(méi)有(是其它字符)，那么.(點(diǎn)號(hào))就會(huì)匹配這些其它字符。這種正則表* 達(dá)式的“查找”也叫做“zero-width-assertions”(零寬度斷言)，因?yàn)樗粫?huì)捕獲任何的字符，只是判斷。在上面的例子里，每個(gè)空字符都會(huì)檢查其前面的字符串是否不是‘hede'，* 如果不是，這.(點(diǎn)號(hào))就是匹配捕捉這個(gè)字符。表達(dá)式(?!hede).只執(zhí)行一次，所以，我們將這個(gè)表達(dá)式用括號(hào)包裹成組(group)，然后用*(星號(hào))修飾——匹配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';// 把匹配的第一個(gè)標(biāo)簽放進(jìn)數(shù)組如<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>的< 開(kāi)始}}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:['鄭州','洛陽(yáng)','新鄉(xiāng)']},{name:'廣州',city:['深圳','東莞','揭陽(yáng)']}],}document.querySelector('#app').innerHTML = render( document.querySelector('#app').innerHTML, data) </script> </body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/fantasy-zxf/p/8144475.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
- 上一篇： mongodb mongoose 常用操
- 下一篇： gradle各版本下载地址