JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底！

先看一段有异常的语句

var sound = 'Roar!';

function myOrneryBeast() {

    this.style.color='green';//window没有style属性

    alert(sound);

}

myOrneryBeast();

加入try{}catch{}

var sound='Roar';

function myOrneryBeast()

{

    this.style.color='green';

    alert(sound);

}

try

{

    myOrneryBeast();

}

catch (theException)

{

    alert('Oops,we caught an exception Name:'

        +'theException.name'

        +',message:'

        +'theException.message'

    );

}

应用实例：你自己的调试日志

平时，我们调试js的时候一般都是用alert但是，当例如遇到for(i in document){alert(i);}这样的情况的时候，确实比较头痛，用过Quarzts.net都知道。我呢，也和他类似，在我们的ADS库中添加类似的功能，类似于for(i in document){ADS.log.write(i);}，下面呢，我们就开始着手完成这样的功能。

myLogger对象

function myLogger(id)

{

    id=id||'ADSLogWindow';

    var logWindow=null;//将在内部被对象用来引用日志窗口的DOM节点

    var createWindow=function(){};//可以用这个方法在DOM树中创建logWindow节点

    this.writeRaw=function(message){};//特权方法用于向日志窗口添加一天记录

}

myLogger.prototype=

{

    //前面讲的，用字面量语法定义

    write:function(message){};//在记录日志使用最频繁的共有方法。

    //他会在message中的尖括号进行编码一边在日志窗口中显示HTML源代码，该方法最终会将编码后的消息字符串传递给writeRaw()方法

    header.function(message){};//向日志窗口中添加加粗、红色的条目来充当标题

    //但是使用字面量不会冗余：比如又增加一个link方法

    link:function(link){};

}

//上面代码也可以如下定义

//myLoger.prototype.write=function(message){};

//header.prototype.write=function(message){};//这地方菜鸟有一点不明白，为嘛不是使用//myLoger.prototype.header=function(message){};

//..

//myLogger.prototype.link=function(link){};//好吧，上面可能是因为印刷错误

if (!window.ADS){window['ADS']={};}

window['ADS']['log']=new myLogger();

下面具体分析每个方法

myLogger.createWindow()

//创建受保护的方法创建日志窗口

createWindow=function()

{

    //取得新窗口在浏览器中

    //居中放置时的左上角位置

    var browserWindowSize=ADS.getBrowserWindowSize();//ADS库中的方法。可以看源码，待会贴出来

    var top=((browserWindowSize.height-200)/2)||0;

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

    //创建作为日志窗口的Dom节点

    //使用受保护的logWindow属性维护引用

    logWindow=document.createElement('UL');

    //指定ID值，以便必要时在DOM树中能够识别他

    logWindow.setAttribute('id',id);

    //在屏幕中居中定位日志窗口

    logWindow.style.position='absolute';

    logWindow.style.top=top+'px';

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

}

getBrowserWindowSize()方法

function getBrowserWindowSize()

{

    var de = document.documentElement;

    return{

        'width':(window.innerWidth||(de&&de.clientWidth)||document.body.clientWidth),

        'height':(window.innerHeight||(de&&de.clientHeight)||document.body.clientHeight)

    }

};

window['ADS']['getBrowserWindowSize']=getBrowserWindowSize;

myLogger.writeRaw()方法

this.writeRaw=function(message)

{

    //如果初始的窗口不存在。则创建它

    if (!logWindow)

    {

        createWindow();

    }

    //创建列表想兵适当的添加样式

    var li  = document.createElement('LI');

    li.style.padding='2px';

    li.style.border='0';

    li.style.borderBottom='1 px dotted black';

    li.style.magin='0';

    li.style.color='#000';

    li.style.font='9px/9px Verdana ,Tahoma,Sans';//其实菜鸟并不知道这样写法是什么意思

    //文章后来提到，这样嵌入样式不是个好的方式。

    //为日志节点添加信息

    if (typeof message='undefined')

    {

        li.appendchild(document.createTextNode('Message was undefined'))

    }else if (typeof li.innerHTML!=undefined)

    {

        li.innerHTML=message;

    }else

    {

        li.appendchild(document.createTextNode(message));

    }

    //将这个条目添加到日志窗口

    logWindow.appendChild(li);

    return true;

};

当我们运行ADS.log.writeRaw('This is raw.');和 ADS.log.writeRaw('<strong>This is bold!</strong>');浏览器中间会显示：

最后，为创建共有的write()和head()方法，要把下列代码添加到myLogger对象原型中去

myLogger.prototype={

    write:function(message)

    {

        //警告message为空值

        if (typeof message=='string' && message.length==0)

        {

            return this.writeRaw('ADS.log:null message');

        }

        //如果message不是字符串，则尝试调用toString()方法，如果不存在该访问则记录对象类型

        if ( typeof message!='string')

        {

            if (message.toString)

            {

                return this.writeRaw(message.toString());

            }

            else

            {

                return this.writeRaw(typeof message);

            }

        }

        //转换<和>以便innerHTML不会将message作为THML进行解析

        message=message.replace(/</g,"&lt;").replace(/>/g,"&gt;");//这里的/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);

        }

};

好，整个实例就这么完成了

还有个疑问，这个源码是怎么上传的，菜鸟没用过，找了半天没找到。。。。。待会去问问去。。。