简易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=/<%([^%>]|((?!%>).)*)%>/g
        var 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>

  

posted @ 2017-12-29 14:49  fantasy-zxf  阅读(244)  评论(0编辑  收藏  举报