簡易js模板引擎

時間 2019-11-11

原文原文鏈接

前陣子參考別人的文章本身理解了一下模板引擎的實現，雖然是照着敲了一邊，可是本身也加深了理解吧。javascript

本身的代碼：java

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。