网站建设找哪里,小说网站开发l,win7优化软件,qq企业邮箱 wordpress前阵子参考别人的文章自己理解了一下模板引擎的实现#xff0c;虽然是照着敲了一边#xff0c;但是自己也加深了理解吧。 原文链接 自己的代码#xff1a; !DOCTYPE html
html langen
headmeta charsetUTF-8ti…前阵子参考别人的文章自己理解了一下模板引擎的实现虽然是照着敲了一边但是自己也加深了理解吧。 原文链接 自己的代码 !DOCTYPE html
html langen
headmeta charsetUTF-8title表达式/title
/head
bodydiv idapp% if(this.age34) {%p我的年龄是% this.age %/p% } %div% name %/div% for(var m0;m this.list.length;m){ %p% this.list[m] %/p% } %ul% for(var pro0;pro this.skills.length; pro){ %li stylefont-size:% this.age%px;% for(var cit0;cit this.skills[pro].city.length;cit){ %span% cit1 %:% this.skills[pro].city[cit] %/span% } %/li% } %/ul
/div
script/*src:http://www.jb51.net/article/52491.htm* 一个字符串是由n个字符组成的。在每个字符之前和之后都有一个空字符。这样一个由n个字符组成的字符串就有n1个空字符串。我们来看一下“ABhedeCD”这个字符串* 所有的e编号的位置都是空字符。表达式(?!hede).会往前查找看看前面是不是没有“hede”字串如果没有(是其它字符)那么.(点号)就会匹配这些其它字符。这种正则表* 达式的“查找”也叫做“zero-width-assertions”(零宽度断言)因为它不会捕获任何的字符只是判断。在上面的例子里每个空字符都会检查其前面的字符串是否不是‘hede* 如果不是这.(点号)就是匹配捕捉这个字符。表达式(?!hede).只执行一次所以我们将这个表达式用括号包裹成组(group)然后用*(星号)修饰——匹配0次或多次* */let str Im singing while youre 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;}// 例如tplp%name%/p// match[0]为%name%,cursor0,match.index3,下一次是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
