首頁 > 開發者 > JavaScript
依照標題，本片部落格介紹這個小例子。下面部落格總結js物件導向知識。
我們做這個小例子的目的就是理解js物件導向的知識。先拿個例子試試手，然後再比較系統的總結下。這塊兒知識在看視頻的時候，感覺看的效果不是很好，很多都是聽的雲裡霧裡的。
在做這個例子的時候，感覺很彆扭。因為JavaScript語言大多情況下是沒有智能提示的。而且firebug調試工具也用的不是很好，還在適應期；錯誤控制台的資訊全是英文的，不能夠及時準確的發現錯誤。
有的地方，不小心敲錯的代碼，調試半天也找不出來，真有種睜眼瞎的感覺啊。看來熟練使用JavaScript，還需要一段時間的練習呀。
好了，下面看例子：
一、我們需要建立下面三個js檔案和一個html文檔。
二、分別解釋上面四個檔案：
1、IC.js是我們建立的自己的JavaScript庫，在這個例子中，我們需要補充兩個方法：
function getBrowserWindowSize(){var de=document.documentElement;return{'width':(window.innerWidth|| (de && de.clientWidth)|| document.body.clientWidth),'heigth':(window.innerHeight|| (de && de.clientHeight)|| de && document.body.clientHeight)}};//註冊本事件window['IC']['getBrowserWindowSize']=getBrowserWindowSize;function addEvent(node,type,listener){if(!(node=$(node))) return false;if(node.addEventListener){ node.addEventListener(type,listener,false);return true; }else if(node.attachEvent){ node['e'+type+listener]=listener;node[type+listener]=function(){node['e'+type+listener](window.event);}node.attachEvent('on'+type, node[type+listener]);return true; } return false;};//註冊本事件window['IC']['addEvent']=addEvent;
2、myLog.js是該例子的核心。myLogger函數中，包含建構函式，createWindow函數，writeRaw函數。
createWindow函數用於建立一個表單。
writeRaw函數用於向所建立的表單中添加一條記錄。
myLogger函數仍包含write和header兩個特權函數。write函數用於將大於符號小於符號進行正則轉換成HTML標記；header函數用於向日誌表單中添加標題。
// JavaScript Document//myLogger的建構函式function myLogger(id){id=id||"ICLogWindow";//日誌表單的引用var logWindow=null;//建立日誌表單var createWindow=function(){var browserWindowSize=IC.getBrowserWindowSize();var top=(browserWindowSize.height-200)/2||0;var left=(browserWindowSize.width-200)/2||0;//使用ULlogWindow=document.createElement("UL");//在document下添加一個dom對象UL//添加ID進行標識logWindow.setAttribute("id",id);//對表單進行css樣式控制logWindow.style.position='absolute';logWindow.style.top=top+'px';logWindow.style.left=left+'px';logWindow.style.width='200px';logWindow.style.height='200px';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);}//向日誌表單中添加一行this.writeRaw=function(message){//如果初始表單是不存在的，則組建記錄檔表單if(!logWindow){createWindow();}//建立li的dom節點var li=document.createElement('LI');//對表單進行css樣式控制li.style.padding='2px';li.style.border='0';li.style.borderBottom='1px dotted black';li.style.margin='0';li.style.color='#000';//驗證message資訊if(typeof message == 'undefined'){ //在li裡面添加文本節點。li.appendChild( document.createTextNode('Message is undefined') );}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.writeRaw('沒有輸入資訊');}if(typeof message !='string'){if(message.toString){return this.writeRaw(message.toString());}else{return this.writeRaw(typeof message);}}//將大於符號小於符號進行正則轉換成HTML標記message=message.replace(/</g,"<").replace(/>/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);}};window['IC']['log'] = new myLogger();
3、test.js中代碼的主要作用是向window對象裡面添加一個load事件。然後分別測試myLog.js裡面的方法的正確性：
// JavaScript Document//向window對象裡面添加一個load事件IC.addEvent(window,'load',function(){IC.log.writeRaw('This is raw'); IC.log.writeRaw('<strong>This is bold!</strong>');IC.log.header('With a header');IC.log.write('write source:<strong>This is bold!</strong>');for(i in document){IC.log.write(i);}});
4、html頁面的作用就是添加應用，顯示結果：
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title></head><script language="javascript" type="text/javascript" src="IC.js"></script><script language="javascript" type="text/javascript" src="myLog.js" ></script><script language="javascript" type="text/javascript" src="test.js" ></script><body></body>
三、顯示結果：
四、總結：
我們可以將本例中主要代碼寫在自己的JavaScript庫中，並用該方式代替alert方法，達到很好的顯示效果（如）。使用的同時，我們也在熟悉該函數，和其中很優雅的寫法，慢慢的它就會變成我們自己的東西。
原始碼下載：http://download.csdn.net/detail/liu765023051/4365978
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
