JavaScript DOM進階程式設計 2.4-try{}catch{}–我要堅持到底!

來源:互聯網
上載者:User

先看一段有異常的語句

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

好,整個執行個體就這麼完成了

還有個疑問,這個源碼是怎麼上傳的,菜鳥沒用過,找了半天沒找到。。。。。待會去問問去。。。

 

 

 

 

 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.