javascript - 创建嵌套 DIV - 性能提示

Question

当提供对象数组时，我需要创建一个由嵌套 DIV 组成的 HTML 输出。

目前我正在使用以下代码，它可以工作。这个例子非常简单，因为在生产中，我有许多对象和复杂的 HTML 需要创建和初始化。

目前我使用两个循环，一个用于打开 DIV，一个用于关闭 DIV。

我想知道您是否可以建议我另一种方法，考虑性能，例如避免双循环等等。

        (function () {
            var html = '';
            var data = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];

            function open(item) {
                html += '<div id="' + item.id + '">';
            }
            function close(item) {
                html += '</div>';
            }

            for (var i = 0, len = data.length; i < len; i++) {
                open(data[i]);
            }
            for (var i = 0, len = data.length; i < len; i++) {
                close(data[i]);
            }
            alert(html);
            /* RESULT
            <div id="a">
                <div id="b">
                    <div id="c">
                    </div>
                </div>
            </div>
            */

        })();

Answer 1

我认为这是递归的经典案例。

function createHTML(data) {
    var item = data.shift(), div, child;

    if (item) {
        div = document.createElement("DIV");
        div.id = item.id;
        child = createHTML(data, div);
        if (child) div.appendChild(child);
        return div;
    }
}

createHTML([{ id: 'a' }, { id: 'b' }, { id: 'c' }]);

从连接的字符串构建 HTML 比使用 DOM 方法更容易出错，尤其是在恶意或无意损坏的输入方面。因此我一般更喜欢 DOM 方法。

哪种方法最快 - 这取决于您来衡量，但我建议牺牲纯粹的速度而不是正确且有弹性的代码。