實用篇：說說我在JavaScript項目中使用的工具類

在JavaScript的開發中，我們都會寫一些工具類來幫我們簡化一些業務操作的邏輯，一下就貼幾個我在項目開發過程中常用的工具類。表達能力有限，各位看官還是看源碼吧。

一、日期處理工具類。

/**
 *  日期處理工具類
 *  @Authors: jackyWHJ
 *  @date 2013-10-18
 *
 */
var DateUtils = {
    /**   
     * 得到日期在一年當中的周數
     */
    getISOYearWeek: function(date) {
        var commericalyear = this.getCommerialYear(date);
        var date2 = this.getYearFirstWeekDate(commericalyear);
        var day1 = date.getDay();
        if (day1 == 0) day1 = 7;
        var day2 = date2.getDay();
        if (day2 == 0) day2 = 7;
        var d = Math.round((date.getTime() - date2.getTime() + (day2 - day1) * (24 * 60 * 60 * 1000)) / 86400000);
        return Math.floor(d / 7) + 1;
    },
    /**   
     * 得到一年之中的第一周的日期
     */
    getYearFirstWeekDate: function(commericalyear) {
        var yearfirstdaydate = new Date(commericalyear, 0, 1);
        var daynum = yearfirstdaydate.getDay();
        var monthday = yearfirstdaydate.getDate();
        if (daynum == 0) daynum = 7;
        if (daynum <= 4) {
            return new Date(yearfirstdaydate.getFullYear(), yearfirstdaydate.getMonth(), monthday + 1 - daynum);
        } else {
            return new Date(yearfirstdaydate.getFullYear(), yearfirstdaydate.getMonth(), monthday + 8 - daynum);
        }
    },
    /**   
     * 獲取當前日期的年份
     */
    getCommerialYear: function(date) {
        var daynum = date.getDay();
        var monthday = date.getDate();
        if (daynum == 0) daynum = 7;
        var thisthurdaydate = new Date(date.getFullYear(), date.getMonth(), monthday + 4 - daynum);
        return thisthurdaydate.getFullYear();
    },
    /**   
     * 獲取周一
     */
    getWeekStartDate: function(date) {
        var nowDayOfWeek = (date.getDay() == 0) ? 6 : date.getDay() - 1;
        var t = new Date(date); //復制並操作新對象，避免改動原對象     
        //t.setDate(t.getDate() - nowDayOfWeek);
        t.setTime(t.getTime() - nowDayOfWeek * 86400000);
        return t;
    },
    /**   
     * 獲取周日。本周一+6天 
     */
    getWeekEndDate: function(date) {
        var t = new Date(date); //復制並操作新對象，避免改動原對象     
        //t.setDate(this.getWeekStartDate(date).getDate() + 6); //date來計算會有出錯的情況出現比如10.1這一周
        t.setTime(this.getWeekStartDate(date).getTime() + 6 * 86400000);
        return t;
    },
    /**   
     * 日期格式化，第一個參數為日期，第二個參數為日期格式化的格式，返回一個格式化后的字符串
     */
    dateFormat: function(date, format) {
        var o = {
            "M+": date.getMonth() + 1, //month
            "d+": date.getDate(), //day
            "h+": date.getHours(), //hour
            "m+": date.getMinutes(), //minute
            "s+": date.getSeconds(), //second
            "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
            "S": date.getMilliseconds() //millisecond
        };
        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
 
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return format;
    },
    /**   
     * 判斷輸入的日期格式是否為 yyyy-mm-dd 或 yyyy-m-d
     */
    isDate: function (dateString) {
        //判斷日期是否為空
        if (dateString.trim() == "") {
            alert("日期為空！請輸入格式正確的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2013-08-08\n\r");
            return false;
        } else {
            dateString = dateString.trim();
        }
        
        //年月日正則表達式
        var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
        if (r == null) {
            alert("請輸入格式正確的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2013-08-08\n\r");
            return false;
        }
        var d = new Date(r[1], r[3] - 1, r[4]);
        var num = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
        if (num == 0) {
            alert("請輸入格式正確的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2013-08-08\n\r");
        }
        return (num != 0);
 
    }
};

 

二、表格合並工具類。

/**
 *  表格通用工具,目前只有合並表格功能，以后慢慢完善
 *  @Authors: jackyWHJ
 *  @date 2013-10-18
 *
 */
var TableUtils = {
    
    /**
     * 函數說明：合並指定表格（表格id為wTableId）指定列（列數為wTableColumn）的相同文本的相鄰單元格  
     * 參數說明：wTableId 為需要進行合並單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數應為 #data   
     * 參數說明：wTableColumn 為需要合並單元格的所在列。為數字，從最左邊第一列為1開始算起。  
     */
    tableColMerger: function(wTableId, wTableColumn) {
 
        var wTableFirstTd = "";
 
        var wTableCurrentTd = "";
 
        var wTableSpanNum = 0;
        var wTableObj = $(wTableId + " tr td:nth-child(" + wTableColumn + ")");
        wTableObj.each(function(i) {
            if (i == 0) {
                wTableFirstTd = $(this);
                wTableSpanNum = 1;
                
            } else {
                wTableCurrentTd = $(this);
                if (wTableFirstTd.text() == wTableCurrentTd.text()) {
                    wTableSpanNum++;
                    wTableCurrentTd.hide(); //remove();  
                } else {
                    wTableFirstTd = $(this);
                    wTableSpanNum = 1;
                }
            }
            wTableFirstTd.attr("rowSpan", wTableSpanNum);
        });
    },
 
    /**
     * 函數說明：合並指定表格（表格id為wTableId）指定行（行數為wTableRownum）的相同文本的相鄰單元格  
     * 參數說明：wTableId 為需要進行合並單元格的表格id。如在HTMl中指定表格 id="data" ，此參數應為 #data   
     * 參數說明：wTableRownum 為需要合並單元格的所在行。其參數形式請參考jQuery中nth-child的參數。  
     *          如果為數字，則從最左邊第一行為1開始算起。  
     *          "even" 表示偶數行  
     *          "odd" 表示奇數行  
     *          "3n+1" 表示的行數為1、4、7、10.  
     * 參數說明：wTableMaxcolnum 為指定行中單元格對應的最大列數，列數大於這個數值的單元格將不進行比較合並。  
     *           此參數可以為空，為空則指定行的所有單元格要進行比較合並。  
     */
    tableRowMerger: function(wTableId, wTableRownum, wTableMaxcolnum) {
        if (wTableMaxcolnum == void 0) {
            wTableMaxcolnum = 0;
        }
        var wTableFirstTd = "";
        var wTableCurrentTd = "";
        var wTableSpanNum = 0;
        $(wTableId + " tr:nth-child(" + wTableRownum + ")").each(function(i) {
            var wTableObj = $(this).children();
            wTableObj.each(function(i) {
                if (i == 0) {
                    wTableFirstTd = $(this);
                    wTableSpanNum = 1;
                } else if ((wTableMaxcolnum > 0) && (i > wTableMaxcolnum)) {
                    return "";
                } else {
                    wTableCurrentTd = $(this);
                    if (wTableFirstTd.text() == wTableCurrentTd.text()) {
                        wTableSpanNum++;
                        wTableCurrentTd.hide(); //remove();  
                    } else {
                        wTableFirstTd = $(this);
                        wTableSpanNum = 1;
                    }
                }
                wTableFirstTd.attr("colSpan", wTableSpanNum);
            });
        });
    },
    
    /**
     * 函數說明：合並指定表格（表格id為wTableId）指定按照列（列數為fromTableColumn）的合並方式合並目標列（列數為toTableColumn）的單元格  
     * 參數說明：wTableId 為需要進行合並單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數應為 #data   
     * 參數說明：fromTableColumn 已經合並的單元格所在列。為數字，從最左邊第一列為1開始算起。  
     * 參數說明：toTableColumn 目標列，為需要合並單元格的所在列。為數字，從最左邊第一列為1開始算起。  
     */
    tableColMergerSpecial: function (wTableId, fromTableColumn,toTableColumn) {
 
        var wTableCurrentTd = "";
        var blockRowArr = {};     //用來存放不需要隱藏的行索引
        var fromTableObj = $(wTableId + " tr td:nth-child(" + fromTableColumn + ")");
        fromTableObj.each(function (i) {
            wTableCurrentTd = $(this);
            if (wTableCurrentTd.attr("rowSpan")) {
                blockRowArr[i] = wTableCurrentTd.attr("rowSpan");
            }
        });
        if (1 > blockRowArr.length) {
            //樣本列不存在合並;
            return;
        }
        var toTableObj = $(wTableId + " tr td:nth-child(" + toTableColumn + ")");
        var isBlock = false;      //是否顯示
        toTableObj.each(function (i) {
            wTableCurrentTd = $(this);
            isBlock = false;
            for (var j in blockRowArr) {
                if (i == j) {
                    isBlock = true;
                    break;
                }
            }
            if (isBlock) {
                wTableCurrentTd.attr("rowSpan", blockRowArr[i]);
            } else {
                wTableCurrentTd.hide(); //remove();  
            }
        });
    },
    
    /**
     * 函數說明：隱藏指定表格（表格id為wTableId）指定列（列數為wTableColumn）  
     * 參數說明：wTableId 為需要進行隱藏列的表格的id。如在HTMl中指定表格 id="data" ，此參數應為 #data   
     * 參數說明：wTableColumn 為需要隱藏的所在列。為數字，從最左邊第一列為1開始算起。  
     */
    tableColHide: function (wTableId, wTableColumn) {
 
        var wTableCurrentTd = "";
        //隱藏列頭
        $(wTableId + " tr th:nth-child(" + wTableColumn + ")").hide();
        //遍歷表格隱藏單元格
        var wTableObj = $(wTableId + " tr td:nth-child(" + wTableColumn + ")");
        wTableObj.each(function (i) {
            wTableCurrentTd = $(this);
            wTableCurrentTd.hide(); //remove();  
        });
    },
};

 

三、數字處理工具類。

/**  數字格式通用工具，目前只寫了數字加千分位功能，以后慢慢完善
 *  @Authors: jackyWHJ
 *  @date 2013-10-18
 *
 */
var NumberFormatter = {
    //函數說明：給數字加千分位顯示  
    //參數說明：num   需要加千分位的數字
 
    numToThousandsSeparator: function (num) {
        //如果傳進來的值不是數字，則原值返回
        if (!Number(num) || num < 1000) {
            return num;
        }
        num = num + "";
        var re = /(-?\d+)(\d{3})/;
        //正則判斷
        while (re.test(num)) {
            //符合條件則進行替換
            num = num.replace(re, "$1,$2");
        }
        return num;
    }
};

 

這個加千分位的司徒正美有一篇博客很有意思。“ 如何將阿拉伯數字每三位一逗號分隔，如：15000000轉化為15,000,000 ”

 

四：將url的查詢參數解析成字典對象

無非就是拆字符或者用正則匹配來解決，因為url允許用戶隨意輸入，如果用拆字符的方式，有任何一處沒有考慮到容錯，就會導致整個js都報錯。而正則就沒有這個問題，他只匹配出正確的配對，非法的全部過濾掉，簡單，方便。

function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);                
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}