javascript学习六——javascript面向对象（实战） 制作调试日志
日期：2014-05-16 浏览次数：20463 次
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是为了识别日志窗口，如果不给的话，那么默认是LSLogWindow
id=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.cr
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
