但这两种方式都有它的局限性，alert会有中断，有些时候alert出来的值并不可靠，闭包的时候用alert可能会得到不正确的值。debugger使用起来其实也挺纠结的，只有ie支持。所以最合理的方式是js把运行过程需要调试的值输出到页面，或者写到cookie也可以，这种方式不会有alert中断带来值不正确的问题，也不会受浏览器类型的限制，唯一纠结的是操作起来很麻烦。
于是，有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式，我们利用这个js的logger组件，就可以用log的输出的方式来进行你的调试工作了。
复制代码 代码如下:
/*
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来输出不同的调试信息。
示例代码如下：
复制代码 代码如下:
logger.debug(new date());
logger.debug(new date().addhours(3));
很简单，再也不用每个地方都写document.getelementid().innerhtml或者alert/debugger来输出内容了。
示例代码中使用的addhours是我扩展js的date对象方法，想要了解更多的朋友可以查看《扩展js的date方法》。