JavaScript-创建日志调试对象与alert说拜拜

  

JavaScript的学习是先跟着牛腩老师学的,他的视频中讲的比较简单,很顺利的就学完了,接下来是跟着姜昊老师学习,本以为有从牛腩老师那学的基础做铺垫,这里应该也会很轻松的学完,结果不是很乐观,虽然也进行了总结,也跟着做例子,但是还是云里雾里的,例子中很多东西并不能明确确实是起什么作用的,遇到问题用fireBug调试也不是很好,就是接下来要与大家分享的这个例子我犯了一个说大不大但很致命的错误,直接导致我的程序运行不出来,好了不发牢骚了马上给大家分享我的小成果,虽然……但是运行出来的时候还是如此高兴！哈哈

这个实例中涉及到了三个.js文件和一个.html文件构成,下面分别介绍以上四个文件

1.  IC.js是自己建立的JavaScript库，在这个例子中，需要在原来的库中添加一个方法

functiongetBrowserWindowSize(){
           var de = document.documentElement;
          
           return {
                    'width'      :(
                             window.innerWidth
                             || (de &&de.chileWidth)
                             || document.body.clientWidth),
                    'height' :(
                             window.innerHeight
                             || (de &&de.clientHeight)
                             ||document.body.clientHeight)
                   
           }
};

2.  test.js中代码的主要作用是向window对象里面添加一个load事件。

IC.addEvent(window, 'load', function(){
     //验证
     IC.log.writeRaw('Thisis raw.');
    
     IC.log.writeRaw('<strong>Thisis bold!</strong>');
    
     IC.log.header('Witha header');
    
     //IC.log.write('writesource: <strong>This is bold!</strong>');
    //遍历整个 document
     for(i in document){
          IC.log.write(i);
     }
 
});

3．myLog.js中涉及到 myLogger函数，此函数还包含构造函数，createWindow函数，writeRaw函数。这些函数将在rest.js文件中的到验证

function myLogger(id){
    id =id||"ICLogWindow";
    //日志窗体的引用
    var logWindow =null;
    //创建日志窗体
    var createWindow =function(){
          //获取浏览器窗口的大小
          varbrowserWindowSize = IC.getBrowserWindowSize();
          //浏览器高度
          var top =(browserWindowSize.height-200)/2||0;
          //浏览器左上角坐标
          var left =(browserWindowSize.width-200)/2||0;
         
          //使用UL
          logWindow =document.createElement('UL');
         
          //添加ID进行标识
          logWindow.setAttribute("id",id);
         
          //对窗体进行CSS样式的控制
          logWindow.style.position= 'absolute';
          logWindow.style.top= top + 'px';
          logWindow.style.left= left + 'px';
         
          //对UL窗体进行控制
          logWindow.style.width= '200px';
          logWindow.style.height= '200px';
          logWindow.style.overflow= 'scroll'; //添加滚动条
         
          //对UL进行控制,根据盒子模型
          logWindow.style.padding= '0';
          logWindow.style.margin= '0';
          logWindow.style.border= '1px solid black';
          //背景白色,列表样子没有,字体设置
          logWindow.style.backgroundColor= 'white';
          logWindow.style.listStyle= 'none';
          logWindow.style.font= '10px/10px Verdana, Tahoma, Sans';
         
          //在body上添加一个子节点,我们创建的窗体挂载到BODY上
          document.body.appendChild(logWindow);
         
    }
    //声明特权方法,向日志文件中添加一条记录另一种写法是 myLogger.prototype.writeRaw = function(){}
    this.writeRaw =function(message){
          //如果初始窗体是不存在的,则生成日志窗体
          if(!logWindow){
               createWindow();
          }
          //创建LI 的DOM节点
          var li =document.createElement('LI');
          //进行CSS样式控制
          li.style.padding= '2px';
          li.style.border= '0';
          li.style.borderBottom= '1px dotted black';
          li.style.margin= '0';
          li.style.color = '#000'
         
          //验证message信息
          if(typeofmessage == 'undefined'){
               li.appendChild(
                     document.createTextNode('Messageis undefined')
               );
          }elseif(typeof li.innerHTML != undefined){
               li.innerHTML= message;
          }else{
               li.appendChild(
                     document.createTextNode(message)
               );
          }
         
          logWindow.appendChild(li);
          return true;
    };
}
 
//使用对象自变量的方式声明特权方法
myLogger.prototype = {
    //也是向日志窗体添加一行,对输入的内容进行简单处理.
    write:function(message){
          if(typeofmessage == 'string' && message.length==0){
               returnthis.writeRaw('没有输入信息');
          }
          if(typeofmessage != 'string'){
               if(message.toString){
                     returnthis.writeRaw(message.toString());
               }else{
                     returnthis.writeRaw(typeof message); 
               }
          }
         
          //将大于号小于号进行正则转换成HTML标记
          message =message.replace(/</g,"<").replace(/>/g,">");
          returnthis.writeRaw(message);
    },
    //向日志窗体中添加标题
    header:function(message){
          message ='<spanstyle="color:white;background-color:black;font-weight:bold;padding:0px5px;">' + message +'</span>';
          returnthis.writeRaw(message);
    }
};
 
window['IC']['log'] = new myLogger();

4.log-1.html文件中只添加了其他三个.js文件

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>日志</title>
 
<scriptlanguage="JavaScript" type="text/javascript"src="IC.js"></script>
<scriptlanguage="JavaScript" type="text/javascript"src="test.js"></script>
<scriptlanguage="JavaScript" type="text/javascript"src="myLog.js"></script>
 
</head>
<body>
</body>
</html>

5.运行结果

             

6.对比

如果使用alert的话,显示的内容少还是可以应用的，但是像此例中需要显示这么多内容，那就太不人性化了，由于这里我们使用了滚动条而且固定了显示框的高度，所以大家看到的内容只有这么一点，下面我把logWindow.style.height= '200px' 改为logWindow.style.height= '700px'大家再看看效果，看完后就知道在这里该与alert说拜拜了

源代码下载地址：http://download.csdn.net/detail/cjr15233661143/6651719,欢迎广大同胞免费下载