简单实用的js调试logger组件

开发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方法》

posted @ 2010-11-20 19:42  木子博客  阅读(3682)  评论(7编辑  收藏  举报