【硬核技能】舒工自创bind绑定数据方法，类似angular和vue绑定数据原理

if ($g) {
    $g.$utils || ($g.$utils = {});
} else {
    var $g = {};
    $g.$utils = {};
}
/*绑定数据神器*/
$g.$utils.bind = {
    a(html, obj) {
        return this.object(html, obj);
    },
    object(h, o) {
        for (var a in o) var b = o[a], h = this.set(h, a, b);
        return h;
    },
    set(h, l, v) {
        if (!h) return console.log("html传参为空", l, v);
        return h.replace(new RegExp("{" + l + "}", "g"), v).replace(new RegExp("\\[" + l + "\\]", "g"), v);
    },
    sets(html, keys, vals, defaults, valsIsObject) {
        //defaults是当vals对应值为空的时候，默认的缺省值
        //valsIsObject为true的时候vals为一个对象{key:value,key:value,key:value,…}，其中key就是keys里面对应的值
        for (var i = 0, len = keys.length; i < len; i++) {
            var a = keys[i], b = valsIsObject ? vals[a] : vals[i], c = defaults ? valsIsObject ? defaults[a] : defaults[i] : null;
            b || c && (b = c);
            html = this.set(html, a, b);
        }
        return html;
    }
};

//测试用例----------------------------------------------------------------
var html = "";
var tpl = "<li id=\"id_[id]\"><p>[label]</p></li>\n";
var arr = [
    {id: 1, label: "内容1"},
    {id: 2, label: "内容2"},
    {id: 3, label: "内容3"},
    {id: 4, label: "内容4"},
    {id: 5, label: "内容5"}
];
for (var i = 0, len = arr.length; i < len; i++) {
    var a = arr[i];
    html += $g.$utils.bind.a(tpl, {id: a.id, label: a.label});//JSON键值对应匹配绑定方式（推荐）
    // html += $g.$utils.bind.sets(tpl, ["id", "label"], [a.id, a.label]);//数组对应匹配绑定方式（不推荐）
}
console.log(html);
// document.querySelector("dom").innerHTML = html;