javascript循环渲染HTML模板,非侵入式

2023-2-9 09:34:26

前端渲染页面时, 经常会遇到渲染列表的需求,

当后端返回的一些字段的值是枚举类的时候(比如常用的status), 为了减轻服务端压力, 可以由前端js代码将数值转为文字显示. (映射表也由服务端下发)

这个js小插件纯js编写, 没有在标签中加入 v-for 之类的属性, 能够使HTML代码更纯净一些

用法参考: RepeatJs

源码: Gitee

1. 渲染innerHTML (二维列表)

<div class="effect table" id="tpl_repeat_inner">
    <div class="flex-row-around tr">
        <div class="td">{name}</div>
        <div class="td">{age}</div>
        <div class="td">{fav}</div>
    </div>
</div>    

js:

let repeat = new zbRepeat();
let json_list = [{name:'张三', age:18, fav:1},{name:'李四', age:18, fav:2},{name:'王五', age:18, fav:3},{name:'赵六', age:18, fav:4}];
repeat.repeatInnerHTML('#tpl_repeat_inner', json_list);

 

2. 渲染outerHTML (二维列表)

<div class="effect table">
    <div class="tpl_repeat_outer flex-row-around tr">
        <div class="td">{name}</div>
        <div class="td">{age}</div>
        <div class="td">{fav}</div>
    </div>
</div>

js:

let repeat = new zbRepeat();
let json_list = [{name:'张三', age:18, fav:1},{name:'李四', age:18, fav:2},{name:'王五', age:18, fav:3},{name:'赵六', age:18, fav:4}];
        
function maping(obj) {
    let fav = '';
    switch (obj.fav) {
        case 1: fav = '篮球'; break;
        case 2: fav = '足球'; break;
        case 3: fav = '地球'; break;
        default: fav = '语文';break;
    }
    obj.fav = fav;
    return obj;
}

repeat.repeatOuterHTML('.tpl_repeat_outer', json_list, maping); //循环oute

 

3. 渲染多层嵌套的HTML (多层及列表, 细节参考之前文章)

<div class="effect" id="repeat_node">
    <div id="tpl_repeat_node">
        <div>{aa}</div>
        <div>{bb}</div>
        <div>{mm}</div>
        <div>
             <div class="cc">{n} : {v} : {mm}</div>
         </div>
        <div class="dd">
            <div>{d1}</div>
            <div>{d2}</div>
            <div>{mm}</div>
            <div class="d3">{x} : {y} : {mm}</div>
        </div>
    </div>
</div>
                               

js:

let repeat = new zbRepeat();
let json_nest_list = [{
        'aa' : 'aa',
        'bb' : 'bb',
        'mm' : '1',
        'cc' : [
            {'n': 'n1', 'v' : 'v1', 'mm' : '2' },
            {'n': 'n2', 'v' : 'v2', 'mm' : '2' },
            {'n': 'n3', 'v' : 'v3', 'mm' : '2' },
        ],
        'dd' : {
            'd1' : 'd1',
            'd2' : 'd2',
            'd3' : [
                {'x' : 'x1', 'y': 'y1', 'mm': '4'},
                {'x' : 'x2', 'y': 'y2', 'mm': '4'},
                {'x' : 'x3', 'y': 'y3', 'mm': '4'},
            ],
            'mm' : '3'
        }
    }];
let node = document.getElementById('tpl_repeat_node');
let html = repeat.repeatNode(node, json_nest_list);
nodel.innerHTML = html;