javascript学习6——javascript面向对象(实战) 制作

发布时间:2017-09-03 11:30:39
javascript学习6——javascript面向对象(实战) 制作调试日志 一般我们在javascript看效果的时候,往往会用alert函数。

试想,如果我们想看一下document下有多少个对象,那么,我们要可能会写出这样的代码:

[javascript]

for(i in document)

alert(i);

可是在document下有一百多个对象,那么我们要在浏览器中不停的单击一百多次才可以看全,为此, 我们来制作一个简单的日志调试,也是对我们前面学习知道的一个巩固。

制作出来的效果图如下:

调用页面:

[html]

<!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

[javascript]

function mylogger(id){

//给id是为了识别日志窗口,如果不给的话,那么默认是LSLogWindow

id=id||'LSLogWindow';

var logWindow=null;

//创建日志窗体

var createWindow=function()0;

var left=(browserWindowSize.width-200)/2;

//向日志窗体中添加一行

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){

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站建设 http://www.feimao666.com