原生JS实现简易模板

原生JS实现简易模版

String.prototype.renderTpl = function (obj) {
    var myself = this;
    var render = '';
    var source = this.toString();

    if (Object.prototype.toString.call(obj) === '[object Array]') {
        obj.forEach(function (item) {
            render += myself.renderTpl(item);
        });
    } else if (typeof obj === 'object') {
        for (var i in obj) {
            if (typeof obj[i] !== 'function') {
                var patt = new RegExp("{{\\s*\\$" + i + "\\s*}}", "g");
                source = source.replace(patt, obj[i]);
            }
        }
        render += source;
    }

    return render;
};


// 举个栗子

// 模板
var tmp = "{{ $id }}---{{ $name }}\n";

// 值
var val = [
    {'id': 1, 'name': 'a'},
    {'id': 2, 'name': 'b'},
    {'id': 3, 'name': 'c'}
];

// 渲染
console.log(tmp.renderTpl(val));

// 渲染结果为
/*
    1---a
    2---b
    3---c
*/