javascript template engine

最新推荐文章于 2022-11-29 20:21:21 发布

原创最新推荐文章于 2022-11-29 20:21:21 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种简单的模板引擎实现方法，包括变量替换和控制结构（如循环和条件判断）的处理方式。通过具体示例展示了如何将数据动态地填充到HTML模板中。

    //var data = {name: "iflytek", year: 1999};

    /**********************************************/
    var getTpl = function(tpl,data){
        var re = /<%([^%>]+)?%>/g;
        while (match = re.exec(tpl)) {
            tpl = tpl.replace(match[0], data[match[1]]);
        }
        return tpl;
    }
    /**********************************************/

    var TemplateEngine = function (tpl, data) {
        var reg = /<%([^%>]+)?%>/g,
            reExp = /(^( )?(if|for|else|{|}))(.*)?/g,
            code = 'var r=[];\n',
            cursor = 0;
        var add = function (line, js) {
            code += js ? line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n'
                : 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
        }
        while (match = reg.exec(tpl)) {
            add(tpl.slice(cursor, match.index));
            add(match[1], true);
            cursor = match.index + match[0].length;
        }
        add(tpl.slice(cursor, tpl.length));
        code += 'return r.join("");';
        return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
    }

	//var loopTpl = 'name:<%this.info.name%>,site:<%this.info.site%>,building:<%for(var index in this.building){%><h5><%this.building[index]%>楼</h5><%}%>';
    //var data = {info:{name:'iflytek',site:'http://www.iflytek.com'},building:['A1','A2']};
    //var str = TemplateEngine(loopTpl,data);