Javascript之Grid高性能排序

      好久沒上博客園寫文章了，最近看了些關於高性能JS開發的書籍，對於Grid排序這塊自我感覺理解的還算不錯，可以拿上來讓JS高手們指導下！也可以讓JS的新手們了解下！在代碼上有何不妥之處歡迎大家拍磚！感激不盡！

      在這里我主要是封裝了Grid排序的實體功能，為了讓在各種項目版本中都可以直接使用！以下為JS詳細代碼以及注釋！

/*
    * @數據表格排序
    * @CodeBy:MrCo
    * @Date:2013/3/15
    * @Mail:[e-mail]
    */
(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下載地址：http://files.cnblogs.com/keke/GridSort.rar