design的前端开发博客

写javascript程序的时候，经常需要调试，而目前支持断点或者变量跟踪的javascript开发工具也不多，一般情况下，都是自己写个容器或者使用alert来调试，稍微有点空闲时间，写个小工具，辅助javascript的调试工作。不用再在页面里加个容器了，把调试和页面代码分开。如果需要调试，只需要引入一个外部JS文件就行了，调试完毕删除之。查看演示

为了方便使用，没有引入CSS文件和图片，样式都合并在JS里了，简单加了一点颜色，不求美观，但求好用就行。

代码如下：

// JavaScript Document
var JSLog=function(styleObject){
 this.style=this.extend({'width':'200px','height':'160px','border':'#333333 1px solid','right':'10px','top':'10px','position':'absolute','z-index':5000,'background':'#eeeeee','font-size':'12px','line-height':'20px','font-family':'Verdana'},styleObject);
 this.messageBox=null;
 this.title=null;
 this.miniButton=null;
 this.logList=null;  //列表容器
 this.logNumber=1;   //行号
 this.lockLineNumber=0;  //锁定行号
 this.logLineCache=null; //被锁定行
 this.filterHtmlTag=false; //是否过滤html标签
 this.dragTarget=null; //拖拽对象
 this.handle=null; //拖拽控制对象
 this.pos=null; //鼠标坐标点
 this.dragEnable=false; //拖拽状态
 this.diffX=0; //x坐标偏移
 this.diffY=0; //y坐标偏移
}
//初始化消息框
JSLog.prototype.init=function(){
 var style=this.parseJson(this.style);
 var len=style.length;
 var cssText='';
 var that=this;
 for(var i=0;i<len;i++){cssText+=style.key[i]+':'+style.value[i]+';';}
 this.messageBox=document.createElement('div');
 this.messageBox.style.cssText=cssText;
 //标题
 this.title=document.createElement('h3');
 this.title.innerHTML='JSLog Info';
 this.title.style.cssText='margin:0px;padding:0px;background:#bbbbbb;line-height:22px;height:22px;font-size:14px;font-weight:bold;cursor:move;';
 this.messageBox.appendChild(this.title);
 this.setDragHandle(this.messageBox,this.title);
 //按钮
 this.miniButton=document.createElement('a');
 this.miniButton.style.cssText='position:absolute;right:1px;top:1px;cursor:pointer;background:#cccccc;padding:0px 3px;';
 this.miniButton.innerHTML='收起';
 this.messageBox.appendChild(this.miniButton);
 this.bindEvent(this.miniButton,'click',function(){that.minimize();});
 //列表
 this.logList=document.createElement('ul');
 this.logList.style.cssText='margin:0px;padding:1px;list-style:none;line-height:22px;overflow:auto;height:'+(parseInt(this.style.height)-24)+'px;width:'+(parseInt(this.style.width)-2)+'px';
 this.messageBox.appendChild(this.logList);
 document.body.appendChild(this.messageBox);
 this.addLog('使用方法：');
 this.addLog('var demo=new JSLog();');
 this.addLog('demo.init();');
 this.addLog('demo.addLog("log");');
}
//最小化
JSLog.prototype.minimize=function(){
 if(this.messageBox.style.height=='22px'){
 this.messageBox.style.height=this.style.height;
 this.logList.style.display='block';
 this.miniButton.innerHTML='收起';
 }else{
 this.messageBox.style.height='22px';
 this.logList.style.display='none';
 this.miniButton.innerHTML='展开';
 }

}
//锁定行
JSLog.prototype.lockLine=function(isLock){
 if(isLock){
 this.logLineCache=document.createElement('li');
 this.lockLineNumber=this.logNumber++;
 if(this.lockLineNumber%2==0){this.logLineCache.style.cssText='background:#ffffaa;';}else{this.logLineCache.style.cssText='background:#aaffff;';}
 this.logList.appendChild(this.logLineCache);
 }else{
 this.logLineCache=null;
 this.lockLineNumber=0;
 }
}
//弹出消息
JSLog.prototype.addLog=function(info,showAlert){
 if(this.filterHtmlTag){info=String(info).replace(/</g,'&lt;').replace(/>/g,'&gt;');}
 if(this.lockLineNumber==0){
 var li=document.createElement('li');
 if(this.logNumber%2==0){li.style.cssText='background:#ffffaa;';}else{li.style.cssText='background:#aaffff;';}
 li.innerHTML='<span>'+(this.logNumber++)+'.</span> '+info;
 this.logList.appendChild(li);
 }else{
 this.logLineCache.innerHTML='<span>'+(this.lockLineNumber)+'.</span> '+info;
 }
 if(showAlert){alert(info);}
}
//转换html标签
JSLog.prototype.filterHtml=function(flag){
   if(flag){this.filterHtmlTag=true;}else{this.filterHtmlTag=false;}
}
//合并对象
JSLog.prototype.extend=function(target,object){
 for(var key in object){
 target[key]=object[key];
 }
 return target;
}
//解析JSON格式数据
JSLog.prototype.parseJson=function(jsonData){
 var keys=[],items=[],n=0;
 for(var k in jsonData){
 n++;
 keys.push(k);
 items.push(jsonData[k]);
 }
 return {'key':keys,'value':items,'length':n};
}
//获取坐标
JSLog.prototype.getMousePos=function(e){
    var e=window.event||e;
  if(e.pageX||e.pageY){
     return {x:e.pageX,y:e.pageY};
  }
  return{
    x:e.clientX + document.body.scrollLeft-document.body.clientLeft,
    y:e.clientY + document.body.scrollTop-document.body.clientTop
  };
}
//执行拖拽
JSLog.prototype.drag=function(e){
   this.pos=this.getMousePos(e);
   if(this.dragEnable){this.dragTarget.style.left=(this.pos.x-this.diffX)+'px';this.dragTarget.style.top=(this.pos.y-this.diffY)+'px';}
}
//绑定拖拽事件
JSLog.prototype.setDragHandle=function(target,handle){
     var that=this;
     this.handle=handle;
     this.dragTarget=target;
     this.bindEvent(document,'mousemove',function(e){that.drag(e);});
     this.bindEvent(this.handle,'mousedown',function(e){
       that.dragEnable=true;
       that.pos=that.getMousePos(e);
       that.diffX=that.pos.x-that.dragTarget.offsetLeft;
       that.diffY=that.pos.y-that.dragTarget.offsetTop;
    });
    this.bindEvent(document,'mouseup',function(){that.dragEnable=false;});
}
//绑定事件侦听
JSLog.prototype.bindEvent=function(object,eventType,fnHandler){
     if(object.addEventListener){//DOM
        object.addEventListener(eventType,fnHandler,false); //false=绑定在冒泡阶段
     }else if(object.attachEvent){//IE
        object['e'+eventType+fnHandler]=fnHandler;  //add content
        object[eventType+fnHandler]=function(){object['e'+eventType+fnHandler](window.event);}   //add content
        object.attachEvent('on'+eventType,object[eventType+fnHandler]);
     }else{//others
        object['on'+eventType]=fnHandler;
     }
}
//移除事件绑定
JSLog.prototype.unbindEvent=function(object,eventType,fnHandler){
    if(object.removeEventListener){//DOM
       object.removeEventListener(eventType,fnHandler,false);
    }else if(object.detachEvent){//IE
       object.detachEvent('on'+eventType,fnHandler);
    }else{//others
       object["on"+eventType]=null;
    }
}

使用方法：

var demo=new JSLog({width:'300px',height:'200px',right:'240px'});  //初始化，样式参数可以不写
demo.init();  //执行默认设置
demo.addLog('test'); //输出信息到对话框
demo.addLog('test2',true); //第二个参数设置为true，显示alert
demo.filterHtml(true); //过滤html标签括号
demo.lockLine(true); //锁定行，输出信息变化在本行显示