JavaScript面向对象实例——创建日志调试对象来代替alert函数进行调试

最新推荐文章于 2022-06-15 21:20:28 发布

tiantiangeq

最新推荐文章于 2022-06-15 21:20:28 发布

阅读量136

点赞数

文章标签： javascript ViewUI

依照标题，本片博客介绍这个小例子。下面博客总结js面向对象知识。

我们做这个小例子的目的就是理解js面向对象的知识。先拿个例子试试手，然后再比较系统的总结下。这块儿知识在看视频的时候，感觉看的效果不是很好，很多都是听的云里雾里的。

在做这个例子的时候，感觉很别扭。因为JavaScript语言大多情况下是没有智能提示的。而且firebug调试工具也用的不是很好，还在适应期；错误控制台的信息全是英文的，不能够及时准确的发现错误。

有的地方，不小心敲错的代码，调试半天也找不出来，真有种睁眼瞎的感觉啊。看来熟练使用JavaScript，还需要一段时间的练习呀。

好了，下面看例子：

一、我们需要建立下面三个js文件和一个html文档。

二、分别解释上面四个文件：

1、IC.js是我们建立的自己的JavaScript库，在这个例子中，我们需要补充两个方法：

2、myLog.js是该例子的核心。myLogger函数中，包含构造函数，createWindow函数，writeRaw函数。

createWindow函数用于创建一个窗体。

writeRaw函数用于向所创建的窗体中添加一条记录。

myLogger函数仍包含write和header两个特权函数。write函数用于将大于号小于号进行正则转换成HTML标记；header函数用于向日志窗体中添加标题。

// JavaScript Document //myLogger的构造函数 function myLogger(id){ id=id||"ICLogWindow"; //日志窗体的引用 var logWindow=null; //创建日志窗体 var createWindow=function(){ var browserWindowSize=IC.getBrowserWindowSize(); var top=(browserWindowSize.height-200)/2||0; var left=(browserWindowSize.width-200)/2||0; //使用UL logWindow=document.createElement("UL"); //在document下添加一个dom对象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.listStyle='none'; logWindow.style.font='10px/10px Verdana, Tahoma, Sans'; //将窗体添加到页面上面 document.body.appendChild(logWindow); } //向日志窗体中添加一行 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(typeof message == 'undefined'){ //在li里面添加文本节点。 li.appendChild( document.createTextNode('Message is undefined') ); }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.writeRaw('没有输入信息'); } if(typeof message !='string'){ if(message.toString){ return this.writeRaw(message.toString()); }else{ return this.writeRaw(typeof message); } } //将大于号小于号进行正则转换成HTML标记 message=message.replace(/</g,"<").replace(/>/g,">"); return this.writeRaw(message); }, header:function(message){ message='<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">'+message+'</span>'; return this.writeRaw(message); } }; window['IC']['log'] = new myLogger();

3、test.js中代码的主要作用是向window对象里面添加一个load事件。然后分别测试myLog.js里面的方法的正确性：

// JavaScript Document //向window对象里面添加一个load事件 IC.addEvent(window,'load',function(){ IC.log.writeRaw('This is raw'); IC.log.writeRaw('<strong>This is bold!</strong>'); IC.log.header('With a header'); IC.log.write('write source:<strong>This is bold!</strong>'); for(i in document){ IC.log.write(i); } });

4、html页面的作用就是添加应用，显示结果：

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <script language="javascript" type="text/javascript" src="IC.js"></script> <script language="javascript" type="text/javascript" src="myLog.js" ></script> <script language="javascript" type="text/javascript" src="test.js" ></script> <body> </body>

三、显示结果：