簡單實用的js除錯logger元件

iDotNetSpace發表於2010-11-23
JS除錯元件

開發js元件的時間除錯總是麻煩的，最常用的就是用alert或者debugger來測試js的執行狀態。但這兩種方式都有它的侷限性，alert會有中斷，有些時候alert出來的值並不可靠，閉包的時候用alert可能會得到不正確的值。debugger使用起來其實也挺糾結的，只有ie支援。所以最合理的方式是js把執行過程需要除錯的值輸出到頁面，或者寫到cookie也可以，這種方式不會有alert中斷帶來值不正確的問題，也不會受瀏覽器型別的限制，唯一糾結的是操作起來很麻煩。

於是，有了下面說的這個js元件。這個元件的實現參考了log4net元件的記錄方式，我們利用這個js的logger元件，就可以用log的輸出的方式來進行你的除錯工作了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/*
js除錯元件
*/
(function () {
    var logger = function (level, object, viewType) {
        this.level = level;
        this.object = object;
        this.viewType = viewType;
    }
    logger.LEVEL_DEBUG = 0;
    logger.LEVEL_INFO = 1;
    logger.LEVEL_WARN = 2;
    logger.LEVEL_ERROR = 3;
    logger.LEVEL_FATAL = 4;
    logger.VIEW_TYPE_ALERT = 0;
    logger.VIEW_TYPE_APPEND = 1;
    logger.prototype = {
        setLevel: function (level) {
            this.level = level;
        },
        setObject: function (o) {
            if (typeof o == 'string') {
                this.object = document.getElementById(o);
            } else {
                this.object = o;
            }
        },
        setViewType: function (type) {
            this.viewType = type;
        },
        log: function (s) {
            this.message(100, s);
        },
        debug: function (s) {
            this.message(logger.LEVEL_DEBUG, s);
        },
        info: function (s) {
            this.message(logger.LEVEL_INFO, s);
        },
        warn: function (s) {
            this.message(logger.LEVEL_WARN, s);
        },
        error: function (s) {
            this.message(logger.LEVEL_ERROR, s);
        },
        fatal: function (s) {
            this.message(logger.LEVEL_FATAL, s);
        },
        message: function (level, s) {
            if (level >= this.level) {
                if (this.object != null) {
                    this.object.innerHTML = s;
                } else if (this.viewType == logger.VIEW_TYPE_ALERT) {
                    alert(s);
                } else {
                    document.body.appendChild(document.createTextNode(s));
                    document.body.appendChild(document.createElement("br"));
                }
            }
        }
    };
    if (typeof window.Logger == 'undefined' || window.Logger == null)
        window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND);
})();

怎麼使用呢？

這個js元件往window物件註冊了Logger物件，我們可以用Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal來輸出不同的除錯資訊。

示例程式碼如下：

1
2
Logger.debug(new Date());
Logger.debug(new Date().addHours(3));

很簡單，再也不用每個地方都寫document.getElementId().innerHtml或者alert/debugger來輸出內容了。

示例程式碼中使用的addHours是我擴充套件js的Date物件方法，想要了解更多的朋友可以檢視《擴充套件js的Date方法》。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-679363/，如需轉載，請註明出處，否則將追究法律責任。

相關文章