Javascript之Grid高性能排序

      好久没上博客园写文章了，最近看了些关于高性能JS开发的书籍，对于Grid排序这块自我感觉理解的还算不错，可以拿上来让JS高手们指导下！也可以让JS的新手们了解下！在代码上有何不妥之处欢迎大家拍砖！感激不尽！

      在这里我主要是封装了Grid排序的实体功能，为了让在各种项目版本中都可以直接使用！以下为JS详细代码以及注释！

/*
    * @数据表格排序
    * @CodeBy:MrCo
    * @Date:2013/3/15
    * @Mail:co.mr.co@gmail.com
    */
(function (w) {

    /*
        * @验证在window对象中是否已经存在gridSort对象
    */
    if (w.gridSort) {
        return new Error('系统中以存在gridSort类');
    }

    /*
        * @创建排序的构造函数
        * @GID string 需要支持排序的table唯一ID，只能是ID             
    */
    var GridSort = function (GID) {                
        this.Grid = document.getElementById(GID);
        this.Gbody = this.Grid.tBodies[0];
        this.Ghead = this.Grid.tHead;
    }

    /*
        * @公共的静态函数
        * @主要是做Grid中字符串类型转换并返回新类型值，以便排序使用
        * @val string      需要转换的字符串值
        * @valType string  需要转换的类型格式，目前接收int、float、date,默认返回string型
    */
    GridSort._StringByConvert = function (val, valType) {
        if (!valType) return val.toString();
        switch (valType.toLowerCase()) {
            case 'int':
                return parseInt(val);
            case 'float':
                return parseFloat(val);
            case 'date':
                return new Date(Date.parse(val));
            default:
                return val.toString();
        }
    }

    /*
        * @Grid支持排序的核心方法
        * @colIdx int  数据表（table）中td的列索引
        * @colType string 数据表（table）中td的列类型
    */
    GridSort.prototype._Sequence = function (colIdx, colType) {
        //这里相信JS的高手们一下就可以看出来这是一个匿名方法体
        //这个方法体在这里不会执行，它会return到调用_Sequence()的函数上去执行
        //在这里这个匿名方法体是属于Array的Sort（）函数的参数
        //细心的童鞋可能主要到了arguments
        //我们将这两个参数看做为A跟B，接下来我们来看看这两个参数是如何比较的
        //译：
        //若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
        //若 a 等于 b，则返回 0。
        //若 a 大于 b，则返回一个大于 0 的值。
        return (function(){
            var _rowPrevVal = GridSort._StringByConvert(arguments[0].cells[colIdx].firstChild.nodeValue, colType),  //这个相当于A参数
                _rowAfterVal = GridSort._StringByConvert(arguments[1].cells[colIdx].firstChild.nodeValue, colType); //这个相当于B参数
                if (_rowPrevVal < _rowAfterVal)
                    return -1;
                else if (_rowPrevVal > _rowAfterVal)
                    return 1;
                else
                    return 0;                                
        });
    }

    /*
        * @Grid列头点击事件的处理方法
        * @该方法为处理排序的核心方法，包含了Table内置函数的使用，以及文档碎片的使用
        * @通过此方法可以比一般处理DOM来排序的性能高很多
    */
    GridSort.prototype.BindClickHeadSort = function () {                
        var _rowsHead = this.Ghead.rows[0].cells,
            _gbody = this.Gbody,
            _gridRows = _gbody.rows,
            _girdSort = this._Sequence;
                
        //为每个Grid列头绑定一个Click的点击事件，这样比直接在dom上添加onclick更简洁
        for (var i = 0, count = _rowsHead.length; i < count; i++) {

            //注意这里，这里为了避免闭包的影响使用了匿名函数
            (function (idx) {                        
                _rowsHead[idx].onclick = function () {
                    var _sortRows = [],                             
                        _sortType = this.getAttribute('stype'),
                        _orderby = _gbody.getAttribute('orderby');

                    //首先将Grid中的Row Copy到一个空数组中，以便之后排序
                    for (var i = 0, count = _gridRows.length; i < count; i++) {
                        _sortRows[i] = _gridRows[i];
                    }

                    //这里的_orderby是我们自己设置的属性，为了区分是降序还是升序
                    if (!_orderby) {
                        //开始执行Array的Sort()函数，可能很多童鞋都还米有看见过Sort()函数中加参数的用法
                        //不了解Sort()函数参数的童鞋，请马上跳到_Sequence()函数那里继续看吧，那里我会解释
                        _sortRows.sort(_girdSort(idx, _sortType));
                        _gbody.setAttribute('orderby', 'asc');
                    } else {
                        _sortRows.reverse();
                        _gbody.removeAttribute('orderby');
                    }
                            
                    //这里创建文档碎片，然后通过上面已排好序的Rows从新添加到文档碎片中
                    //使用文档碎片的好处是，避免了浏览器的绘制过程，加快了页面响应速度
                    var _newRows = document.createDocumentFragment();                            
                    for (var j = 0, count2 = _sortRows.length; j < count2; j++) {
                        _newRows.appendChild(_sortRows[j]);
                    }

                    //最后一次性的加载到了Grid的内部
                    _gbody.appendChild(_newRows);                            
                }
            })(i);
        }                                    
    }
            
    /*
        * 将构建好的GridSort类的指针指向window的gridSort
        * 这样做的目的是为了封装，这样外部就只能通过widnow.gridSort()来访问GridSort类了
        * 这样就起到了对GridSort类的保护作用
    */
    w.gridSort = (function (gid) { new GridSort(gid).BindClickHeadSort(); });
})(window);

<table width="400" id="tab">
        <thead>
            <tr>
                <th width="100">First Name</th>
                <th width="100">Last Name</th>
                <th width="100" stype="date">Date</th>
                <th width="100" stype="int">Int</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Kingwell</td>
                <td>Leng</td>
                <td>3/10/2012</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1aJim</td>
                <td>Green</td>
                <td>3/5/2012</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Kate</td>
                <td>Bin</td>
                <td>1/2/2012</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Zte</td>
                <td>Ri</td>
                <td>5/3/2012</td>
                <td>33</td>
            </tr>
            <tr>
                <td>Bee</td>
                <td>Dd</td>
                <td>8/1/2012</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        gridSort('tab');
    </script>

Demo下载地址：https://files.cnblogs.com/keke/GridSort.rar