动态生成分组HTML元素的挑战

在前端开发中，我们经常需要根据后端返回的数据或本地静态数据，动态地生成大量的HTML元素。一个常见的场景是创建类似轮播图（carousel）或网格布局，其中每个“页面”或“行”包含固定数量的子元素。例如，从一个包含多个按钮信息的数组中，每15个按钮组成一个carousel-item，每个按钮内部包含一个链接和一张图片。

传统的做法可能会尝试使用嵌套的for循环和jQuery的append()方法。然而，在append()内部的函数中，return语句一旦执行，就会立即退出当前函数，导致只添加第一个元素，而不是循环中生成的所有元素。这使得直接在append()内部构建复杂的多元素结构变得困难且容易出错。

// 常见但存在问题的尝试
$(document).ready(function () {
    let testButtonEntries = [ /* ... 大量按钮数据 ... */ ];

    // 这种方式在append内部的return会导致问题
    for (let sections = 0; sections <= testButtonEntries.length % 15; sections++) {
        $('
')
            .append($('
').append(function () {
                for (let i = 0; i < 15; i++) {
                    // 这里每次循环都会return，导致只添加第一个元素
                    return $('
')
                        .append($('', {
                            href: testButtonEntries[i].link,
                            title: testButtonEntries[i].button_title,
                            target: '_blank'
                        }).append($('@@##@@', {
                            alt: testButtonEntries[i].button_alt_text,
                            class: 'img-responsive',
                            src: 'images/' + testButtonEntries[i].button_image + '.png'
                        })));
                }
            }))
            .appendTo($('#employee-button-container'));
    }
});

解决方案：数据分块与声明式HTML生成

立即学习“Java免费学习笔记（深入）”；

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

下载

$(document).ready(function () {
    const testButtonEntries = [
        // 示例数据，实际应用中会更多
        { button_title: 'Employee Button 1', button_alt_text: 'Alt 1', button_image: 'img1', link: '#link1' },
        { button_title: 'Employee Button 2', button_alt_text: 'Alt 2', button_image: 'img2', link: '#link2' },
        // ... 省略更多数据，假设总共有16个或更多数据
        { button_title: 'Employee Button 15', button_alt_text: 'Alt 15', button_image: 'img15', link: '#link15' },
        { button_title: 'Employee Button 16', button_alt_text: 'Alt 16', button_image: 'img16', link: '#link16' }
    ];

    const rows = []; // 用于存储分块后的数组
    const chunkSize = 15; // 每块的元素数量

    // 当原始数组还有元素时，持续进行分块
    while (testButtonEntries.length > 0) {
        // 使用splice从testButtonEntries中移除chunkSize个元素，并将其添加到rows
        rows.push(testButtonEntries.splice(0, chunkSize));
    }

    // 此时，rows 数组将包含多个子数组，每个子数组最多包含 chunkSize 个元素
    // 例如：rows = [[item1..item15], [item16]]

    // ... 后续的HTML生成代码将在这里
});

2. 声明式HTML生成

一旦数据被分块，我们就可以使用map()方法来遍历这些分块，并为每个分块生成相应的HTML结构。这种方法使得代码更具声明性，易于理解和维护。

$(document).ready(function () {
    const testButtonEntries = [
        // ... 同上，示例数据 ...
    ];

    const rows = [];
    const chunkSize = 15;

    while (testButtonEntries.length > 0) {
        rows.push(testButtonEntries.splice(0, chunkSize));
    }

    // 使用map将每个分块（row）转换为一个carousel-item的HTML字符串
    const generatedHtmlChunks = rows.map((row) => {
        // 对于每个row（即一个carousel-item内部的数据），再次使用map生成其内部的按钮HTML
        const innerElementsHtml = row.map((ele) => {
            const { button_title, link, button_image, button_alt_text } = ele;
            // 使用模板字符串构建每个按钮的HTML
            return `
                

                    
                        @@##@@
                    
                
            `;
        }).join(''); // 将所有按钮的HTML字符串拼接起来

        // 返回一个完整的carousel-item的HTML字符串
        return `
            

                

                    ${innerElementsHtml}
                
            
        `;
    });

    // 将所有生成的HTML字符串拼接成一个大字符串，并一次性插入到DOM中
    $("#employee-button-container").html(generatedHtmlChunks.join(''));
});

完整示例代码

将上述两部分结合，形成完整的解决方案：

    
    
    
    
    



    
动态按钮组生成示例
    

        
    

    

注意事项与总结

1. 效率提升：相较于在循环中多次操作DOM（每次append()都会触发DOM重绘），这种方法先将所有HTML构建成一个字符串，然后通过html()或append()一次性插入DOM，可以显著减少DOM操作次数，提高页面渲染性能。
2. 代码可读性与维护性：使用map()和模板字符串（Template Literals）使得HTML结构与数据逻辑分离，代码更清晰，易于理解和修改。
3. splice()对原数组的影响：Array.prototype.splice()方法会修改原始数组。如果需要保留原始数据，应先创建数组的副本（例如使用slice()方法：const tempArray = [...testButtonEntries]; 或 const tempArray = testButtonEntries.slice();），再对副本进行splice操作。在本例中，修改原数组是可接受的。
4. 图片路径：示例中假设图片路径为images/${button_image}.png，请根据实际项目中的图片存放路径和命名规则进行调整。
5. 错误处理：在实际应用中，应考虑数据为空或数据格式不正确的情况，添加相应的错误处理逻辑。

通过这种数据分块和声明式HTML生成的方法，我们可以优雅且高效地解决动态生成复杂分组HTML元素的挑战，确保代码的健壮性和性能。