提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

简单实用的js调试logger组件实现代码

JS调试组件代码 实现 简单 实用 Logger
2023-06-13 09:14:25 时间
但这两种方式都有它的局限性，alert会有中断，有些时候alert出来的值并不可靠，闭包的时候用alert可能会得到不正确的值。debugger使用起来其实也挺纠结的，只有ie支持。所以最合理的方式是js把运行过程需要调试的值输出到页面，或者写到cookie也可以，这种方式不会有alert中断带来值不正确的问题，也不会受浏览器类型的限制，唯一纠结的是操作起来很麻烦。
于是，有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式，我们利用这个js的logger组件，就可以用log的输出的方式来进行你的调试工作了。
复制代码代码如下:

/*
js调试组件
*/
(function(){
varlogger=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(typeofo=="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;
}elseif(this.viewType==logger.VIEW_TYPE_ALERT){
alert(s);
}else{
document.body.appendChild(document.createTextNode(s));
document.body.appendChild(document.createElement("br"));
}
}
}
};
if(typeofwindow.Logger=="undefined"||window.Logger==null)
window.Logger=newlogger(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(newDate());
Logger.debug(newDate().addHours(3));

很简单，再也不用每个地方都写document.getElementId().innerHtml或者alert/debugger来输出内容了。
示例代码中使用的addHours是我扩展js的Date对象方法，想要了解更多的朋友可以查看《扩展js的Date方法》。

相关文章