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

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

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