最近搞了一个类似于模板引擎之类的小东西，但算不上模板引擎，核心是正则。可用于循环列表，类似于vue中的 v-for。把DOM拿掉也可以用于批量替换字符串。简单做个笔记，方便日后查阅。代码如下：

// 列表渲染
listfor: function(bindDom, template, data){
    var that = this;
    // 绑定的容器
    var bindDom = that.dom(bindDom);
    // 最终的输出结果
    var res = '';
    for(var i=0; i<data.length; i++){
        // 提取键
        var arr = template.match(/{{[0-9a-zA-Z]+}}/g); var newArr = [];
        // 提取值
        for(var x=0; x<arr.length; x++){
            newArr.push(data[i][arr[x].slice(2, -2)] || '');
        }
        // 写入到模板
        var item = that.concatStr(template.replace(/{{[0-9a-zA-Z]+}}/g, '%M'), newArr);
        res += item;
    }
    // 输出DOM
    bindDom.innerHTML = res;
}

------- 2019.10.14 补充----------

上面的代码，that.concatStr()如下：

concatStr: function (str, reg) {
    var len = str.match(/%M/g).length;
    var index = 0;
    while (index < len){
        str = str.replace(/%M/, reg[index]);
        index++;
    }
    return str;
},

补充一个完整的ES6版本：

const listfor = (dom, template, data) => {
    let bindDom = document.querySelector(dom);
    let res = '';
    let keys = template.match(/{{[0-9a-zA-Z]+}}/g);
    data.map((dataMap) => {
        let values = [];
        keys.map((keysMap) => {
            values.push(dataMap[keysMap.slice(2, -2)] || '');
        })
        let item = template;
        values.map((valuesMap) => {
            item = item.replace(/{{[0-9a-zA-Z]+}}/, valuesMap);
        })
        res += item;
    })
    bindDom.innerHTML = res;
}

调用：

listfor('#dom', '<i class="{{icon}}"></i> <p>{{name}}</p>', [
    { name: 'a2', icon: 'a1' },
    { icon: 'b1', name: 'b2' },
    { icon: 'c1', name: 'c2' }
]); 

---- 2020.03.01更新 ---

JQ版本

var draw = function(dom, temp, data, cover){
    cover = cover === undefined ? true : cover;
    var tempToStr = $('<div></div>').append(temp).html();
    var res = cover ? '' : dom.html();
    data.forEach(function(item){
        var str = tempToStr;
        for(var i in item) str = str.replace('{{' + i + '}}', item[i]);
        res += str;
    })
    dom.html(res);
}