用javascript处理十万条数据

最新推荐文章于 2023-08-22 16:12:21 发布

bytxl

最新推荐文章于 2023-08-22 16:12:21 发布

阅读量2k

点赞数

分类专栏：网页

网页专栏收录该内容

102 篇文章 0 订阅

订阅专栏

http://bbs.csdn.net/topics/350229446

当前端开发人员面对成千上万条记录要显示的时候，我们该怎么处理？创建上千上万个Dom对象？

我的思路就是：把看到的区域当画布，创建足够能展现界面的Dom就够了。

比如一个屏幕的高度一般是1000像素左右，假设一条记录占用的高度是24像素，我们只用创建42个对象即可。

接下来就是对这42个对象进行数据填充，通过滚动条调整填充数据的起始下标。

示例：
http://csdntools.googlecode.com/svn/trunk/demo/biglist.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>大数据量显示 Demo</title>
        <style type="text/css">
            .panel{
                overflow:scroll;
                width:200px;
                height:80%;
            }
            .panel .scroll{
            }
            .item{
                width:500px;
                height:20px;
            }
            .odd{
                background-color:#ccc;
            }
            .items{
                overflow:hidden;
                position:absolute;
            }
            .red{
                color:red;
            }
            .green{
                color:green;
            }
        </style>
    </head>
    <body>
        <div><input id="sort_index" type="button" value="按序号排"/><input id="sort_random" type="button" value="按随机值排"/></div>
 
        <script>
            window.console = window.console || { log: function() {} };
             
            function absolutePoint(element) {
                var result = [element.offsetLeft, element.offsetTop];
                element = element.offsetParent;
                while (element) {
                    result[0] += element.offsetLeft;
                    result[1] += element.offsetTop;
                    element = element.offsetParent;
                }
                return result;
            }
 
            /**
             * 设计：王集鹄
             * 日期：2010年12月17日
             * 欢迎关注：http://t.sina.com.cn/zswang
             */
            function ListView(options){
                options = options || {};
                 
                var self = this,
                    $C = function(tagName) { return document.createElement(tagName); }, // 创建节点
                    p,
                    height,
                    item_height, // 项高
                    view_count, // 可见项条数
                    parent = options.parent || document.body, // 容器
                    height, // 面板历史高度
                    div_panel = $C("div"), 
                    div_scroll = $C("div"),
                    div_items = $C("div"),
                    div_items_list = [$C("div")],
                    freed = [div_panel, div_scroll, div_items]; // 可释放的对象
                     
                div_panel.className = "panel";
                parent.appendChild(div_panel);
                 
                div_items.className = "items";
                document.body.appendChild(div_items);
                 
                div_scroll.className = "scroll";
                div_panel.appendChild(div_scroll);
                 
                div_panel.onscroll = function() {
                    doChange();
                }
                div_panel.onresize = function() {
                    doChange();
                }
                 
                div_items_list[0].className = "item";
                div_items.appendChild(div_items_list[0]);
                 
                div_scroll.style.width = div_items_list[0].clientWidth + "px";
                item_height = div_items_list[0].clientHeight;
                 
                p = absolutePoint(div_panel);
                with(div_items.style) {
                    left = p[0] + "px";
                    top = p[1] + "px";
                    width = div_panel.clientWidth;
                    height = div_panel.clientHeight;
                }
                /**
                 * 界面改变
                 */ 
                function doChange() {
                    if (!item_height) return;
                    var i, div;
                    if (height != div_panel.clientHeight) {
                        height = div_panel.clientHeight;
                        view_count = parseInt(height / item_height);
                        for (i = div_items_list.length; i < view_count; i++) {
                            div = $C("div");
                            div.className = "item" + (i % 2 == 0 ? "" : " odd");
                            div_items.appendChild(div);
                            div_items_list.push(div);
                        }
                        for (i = 0; i < div_items_list.length; i++) {
                            div_items_list[i].style.display = i < view_count ? "" : "none";
                        }
                        div_scroll.style.height = div_panel.clientHeight + options.count - view_count + "px";
                        console.log(["view_count", view_count]);
                    }
                    div_items.scrollLeft = div_panel.scrollLeft;
                    if (!options.ondrawitem) return;
                    i = Math.min(view_count, div_items_list.length);
                    while(i--) {
                        // 重新绘制
                        options.ondrawitem(i + div_panel.scrollTop, div_items_list[i]);
                    }
                }
                 
                doChange();
                this.doChange = doChange;
                /**
                 * 释放Dom对象
                 */
                this.dispose = function() {
                    var i = freed.length;
                    while(i--) {
                        freed[i].parentNode.removeChild(freed[i]);
                    }
                    i = freed.length;
                    while(i--) {
                        div_items_list[i].parentNode.removeChild(div_items_list[i]);
                    }
                }
            }
            function format(template, json) {
                if (!json) return template;
                return template && template.replace(/\$\{(.+?)\}/g, function() {
                    return json[arguments[1]];
                })
            }
            window.onload = function() {
                var i = 100000, data = new Array(i);
                while(i--) {
                    data[i] = { index: i, random: Math.random(), key: (+new Date()).toString(36) };
                }
                var listview = new ListView({
                    count: data.length,
                    ondrawitem: function(i, div) {
                        div.innerHTML = format("<em>${index}</em> <span class=\"red\">${random}</span> <span class=\"green\">${key}</span>", data[i]);
                    }
                });
                 
                var asc = 1;
                document.getElementById("sort_index").onclick = function() {
                    asc = -asc;
                    data.sort(function(a, b) {
                        return (a.index - b.index) * asc;
                    });
                    listview.doChange();
                } 
                document.getElementById("sort_random").onclick = function() {
                    asc = -asc;
                    data.sort(function(a, b) {
                        return (a.random - b.random) * asc;
                    });
                    listview.doChange();
                } 
            };
        </script>
    </body>
</html>

抛砖引玉，希望能出现更多精彩应用。