徐向博 / Imin.

JS 列表渲染插件
作者:Imin 时间:2019-09-30 分类: 前端

最近搞了一个类似于模板引擎之类的小东西,但算不上模板引擎,核心是正则。可用于循环列表,类似于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-02-24 18:01