先看一段有異常的語句
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,"<").replace(/>/g,">");//這裡的/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); }};
好,整個執行個體就這麼完成了
還有個疑問,這個源碼是怎麼上傳的,菜鳥沒用過,找了半天沒找到。。。。。待會去問問去。。。