javascript学习6——javascript面向对象（实战） 制作调试日志
一般我们在javascript看效果的时候，往往会用alert函数。
试想，如果我们想看一下document下有多少个对象，那么，我们要可能会写出这样的代码：
for(i in document){alert(i);}
可是在document下有一百多个对象，那么我们要在浏览器中不停的单击一百多次才可以看全，为此， 我们来制作一个简单的日志调试，也是对我们前面学习知道的一个巩固。
制作出来的效果图如下：
调用页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="LS.js"></script><script type="text/javascript" src="Classs3实践myLog.js"></script><script type="text/javascript" src="Classs3实践testjs.js"></script></head><body><span style="color:#3F0; background-color:#FFF; font-weight:bold; padding:0px 5px;">这是标题</span></body></html>
Classs3实践myLog.js
function mylogger(id){//给id是为了识别日志窗口，如果不给的话，那么默认是LSLogWindowid=id||'LSLogWindow';var logWindow=null;//创建日志窗体var createWindow=function(){var browserWindowSize=LS.getBrowserWindowSize();//如果browserWindowSize为空的话，或者没有取到，为了保证安全性，我们给它｜｜一个0//这样的话，就算前面为空的话，top也会等于0，不至于报错。var top=(browserWindowSize.height-200)/2 || 0;var left=(browserWindowSize.width-200)/2 || 0;//使用UL//我们在document下添加UL这样一个DOM对象，并且把这个DOM对象的引用赋给logWindow对象。logWindow=document.createElement('UL');//添加ID进行标识logWindow.setAttribute('id',id);//对窗体进行CSS控制logWindow.style.position='absolute';logWindow.style.top=top+'px';logWindow.style.left=left+'px';logWindow.style.width='200px';logWindow.style.height='200px';logWindow.style.overflow='scroll';logWindow.style.padding='0';logWindow.style.margin='0';logWindow.style.border='1px solid black';logWindow.style.backgroundColor='white';logWindow.style.listsStyle='none';logWindow.style.font='10px verdana,Tahoma,Sans';document.body.appendChild(logWindow);};//向日志窗体中添加一行this.writeRow=function(message){//如果初始窗体是不存在的，则生成日志窗体。if(!logWindow){//这里可不要加this哦，因为如果这里加this的话，那么this表示调用当前方法writeRow的一个实例//也就是myLogger，而createWindow是一个私有属性，所以肯定会报错。createWindow();}//创建li的DOM结点var li=document.createElement('li');//进行CSS样式控制li.style.padding='2px';li.style.border='0px';li.style.borderBottom='1px dotted black';li.style.margin='0';li.style.color='#000';if(typeof message=='undefined'){li.appendChild(document.createTextNode('Message is undefined'));}//innerHTML不是W3C标准，但是所有的浏览器都实现了这个方法，但是这个效率比较高，如果不支持这个方法就用else里面的方法//innerHTML的其它缺点：比如说我们在li下挂了一些其它的DOM元素，我们用innerHTML直接放进去了，这个时候它并不在DOM的结点树下//比如说在li下放心一个div那么页面的DOM元素树里是无法找到这个结点的，将来我们所有DOM操作的话，都无法对这个结点进行操作。还有一个缺点//就是说，因为innerHTML是专门针对html，那么对于大多数的xml的处理来说，它都是无效的。else if(typeof li.innerHTML!='undefined'){li.innerHTML=message;}else{li.appendChild(document.createTextNode(message));}logWindow.appendChild(li);return true;};};mylogger.prototype={//向日志窗体中添加一行，对输入的内容进行简单的处理write:function(message){if(typeof message =='string' && message.length==0){return this.writeRow('没有输入信息');}//注意string的大小写if(typeof message !='string'){//使用能力检测if(message.toString){return this.writeRow(message.toString());}else{return this.writeRow(typeof message);}}message=message.replace(/</g,'<').replace(/>/g,'>');return this.writeRow(message);},//向日志窗体中添加标题header:function(message){message='<span style="color:#3F0; background-color:#FFF; font-weight:bold; padding:0px 5px;">'+message+'</span>';//直接输出，不用转换return this.writeRow(message);}};//我们在window上添加了LS.log这样一个对象，它是mylogger的一个实例window['LS']['log']=new mylogger();
Classs3实践testjs.j
LS.addEvent(window,'load',function(){//LS.log.writeRow('This is Row');//LS.log.write('<strong>This is bold</strong>');LS.log.header('Write a header');for(i in document){LS.log.write(i);}//for(i in document)//{//alert(i);//}});
刚才犯一个错误：
mylogger.prototype={
//向日志窗体中添加一行，对输入的内容进行简单的处理
write:function(message){
if(typeof message =='string' && message.length==0)
{
return this.writeRow('没有输入信息');
}
//注意string的大小写
if(typeof message !='string')
{
//使用能力检测
if(message.toString)
{
return this.writeRow(message.toString());
}
else
{
return this.writeRow(typeof message);
}
}
message=message.replace(/</g,'<').replace(/>/g,'>');
return this.writeRow(message);
},
就是其中的红色部分，还是this的问题，在这个作用域里肯定没有这个函数，在firefox里也会报错：
