js+jq封装解决数据渲染麻烦问题

WaGhost

于 2024-06-21 14:48:41 发布

阅读量135

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_34485551/article/details/139861028

版权

使用js进行数据渲染，是一个很繁琐和麻烦的过程。

使用js+jq封装采用插值表达式，以及data指定数据源，即可直接渲染

utils.js

let html = $('#app')
let htmlStr = html.html()
function linster() {
    html.html(htmlStr)
    let forBom = $('for')
    // 便利每个for元素
    for (let i = 0; i < forBom.length; i++) {
        let forItem = forBom.eq(i)
        let dataKey = forItem.attr('data')
        if (data[dataKey]) {
            let arr = data[dataKey]
            forEachToBom(forItem.prop('outerHTML'), forItem.parent(), forItem, arr)
        }
    }
}

// 循环遍历数组元素 渲染到 Bom
function forEachToBom(source, toDom, remove, arr) {
    $(remove).remove()
    // 便利数组
    arr.forEach((el, index) => {
        let resetSource = source
        let keys = Object.keys(el)
        if (resetSource.indexOf('index') != -1) {
            resetSource = resetSource.replaceAll(`{{index}}`, index)
        }
        keys.forEach((key, index) => {
            // 重置数据源html

            if (resetSource.indexOf(key) != -1) {
                resetSource = resetSource.replaceAll(`{{${key}}}`, el[key])
            }
        })
        toDom.append(resetSource)
    })
}

使用

   <html>
 <for data='banner'>
                <if>
                    <div index='{{index}}' >
                        <img src='http://xxxx.xxxx.xxxx:3064{{url}}' class='d-block' style='width:100%'>
    {{title}}
                    </div>
                </if>
            </for>
</html>
 <script>
        
        var data = {

        }
        
        $.ajax({
            url: baseUrl + '/rest/banner',
            method: 'get',
            async: false,
            headers: {
                'token': sessionStorage.getItem("token"),
                'Content-Type': 'application/json'
            },
            success(va) {
                data['banner'] = va.data
            }
        })
        // 渲染数据
        linster()

    </script>