Javascript中的物件導向編程執行個體

一直以來，我都主要是做winform方面的編程，最近做了點web方面的，所以也研究了幾天的javascript。偶有心得故記之：

應用物件導向的思想在javascript中同樣適用，關鍵的是你敢不敢用，想不想用。

我曾使用vs2005編寫了一個vs2003工具箱完全類似的導航工具條，我比較喜歡在winform中通過這種方式向使用者提供應用程式功能的導航。所以我也想在web中也使用這種方式。網路上這樣的例子很多，但是看過以後都感覺編碼比較複雜，不容易擴充。所以我決定應用vs2005中開發的經驗，用javascript來自己寫一個。很多常用的東西自己花費點時間寫是我比較喜歡的方法，我不大喜歡使用別人寫的，有時候花費在研究別人東西上的時間基本都可以自己寫出來了。並且自己寫的修改容易，應用容易。。。估計這是一個不怎麼好的思想。不過我比較喜歡接受別人的思路，而不喜歡一行行去閱讀別人的代碼。我研究別人的東西喜歡先看demo。

下面介紹下使用javascript寫這麼個工具條的思路：

1、工具條組成：分類（我命名為ToolBand） -- 用div標籤實現，其中Caption以及Image用span以及img標籤實現。工具按鈕（我命名為ToolItem） -- 用div標籤實現，其中Caption以及Image用span以及img標籤實現。工具按鈕的容器（我命名為ToolItemContainer） -- 用div標籤實現。工具條（我命名為ToolBar） -- 用div實現。註：為什麼上面的這些都使用div標籤呢？各位做web的同志都明白，div+css的確在頁面配置方面可以讓代碼更簡潔。 2、在javascript中定義對象的方法，寫發完全就是寫函數，這對於某些剛開始接觸的同志估計不是很適應。

view plaincopy to clipboardprint?

比如：

var ToolBar=function(Width,Height,....)
{
　　 this.Bands = new Array();　//ToolBar中所有的Band
　　 //其他屬性
　　 .....
　　 .....
}
//ToolBar的AddBand方法，其實也就是把一個band增加到ToolBar的Bands數組中
ToolBar.prototype.AddBand = function(band)
{
　　 ....
}
/*
* 初始化完成所有的Band以及ToolItem以後，必須調用此函數來顯示OutLookBar
* 參數：
* parentElem：表示顯示OutLookBar的容器
*/
ToolBar.prototype.Show = function(parentElem)
{
　　 /*
　　 * 根據this.Bands可以遍曆所有的Band
　　 * 然後根據this.Bands[i].ToolItems可以遍曆Bands[i]下的所有ToolItem
　　 * 根據所遍曆到的Band以及ToolItem中儲存的屬性，比如Caption,Width,Height等等，
　　 * 動態建立（比如document.createElement("div")）出實際顯示的div，span等等元素，並顯示。
　　 */
　　 var toolbar = document.createElement("div");
　　 toolbar.style.height = "100%";
　　 toolbar.style.width = "100%";
　　 toolbar.style.position="relative";　//只有使用relative以後，所有的band才可以正確排列
　　 //Band數　
　　 this.ParentElement=parentElem;
　　 this.ParentElement.appendChild(toolbar);
　　 for(var i=0; i<this.Bands.length;i++)
　　 {
　　　　 var bandElem=this.Bands[i].BandElement();
　　　　 .....
　　　　 bandElem.onclick=_OutLookBarSwithBars;
　　　　 toolbar.appendChild(bandElem);
　　　　 //建立一個新的div來包含this.Bands[i]中的ToolItems元素
　　　　 var ToolItemContainer = document.createElement("div");
　　　　 //設定ToolItemContainer 屬性
　　　　 for(var j=0; i<this.Bands[i].ToolItems.length;j++)
　　　　 {
　　　　　　 //將this.Bands[i].ToolItems.ToolItemElement添加到ToolItemContainer上
　　　　　　 //如：ToolItemContainer.appendChild(this.Bands[i].ToolItems.ToolItemElement);
　　　　　　 //....
　　　　 }
　　 }
}
這樣就定義了一個ToolBar對象，其中包含了一個Bands數組，因為一個ToolBar中有多個Band
function Band(name,caption,....)
{
　　 //Band中所有的ToolItem。
　　 this.ToolItems = new Array();
　　 this.name = name;
　　 this.caption = " " + caption;
　　 //其他屬性，你自己根據需要來定義，比如Band上的背景圖片，背景顏色等。
　　 ....
}
//Band的方法，增加ToolItem，其實就是把item增加到this.ToolItems數組中
Band.prototype.AddItem = function(item)
{
　　 .....
}
/*
* 返回當前Band
* 格式：
* ----------------------------
* | Image | caption　　　　　|
* ----------------------------
*/
Band.prototype.BandElement=function()
{
　　 var divElem = document.createElement("div");
　　 divElem.id="ToolBar_Band" + this.name;
　　 divElem.name=this.name;
　　 ....
　　 divElem.style.color=this.color;
　　 ....
　　 divElem.style.position="absolute";
　　 divElem.style.width="100%";
　　 divElem.style.left=0;
　　 //顯示圖片：如果沒有提供圖片路徑，那麼不顯示圖片
　　 if(this.imageURL!=null && this.imageURL.length>0)
　　 {
　　　　 var imgElem=document.createElement("img");
　　　　 imgElem.src = this.imageURL;
　　　　 divElem.appendChild(imgElem);
　　 }
　　 //顯示標題
　　 var spanElem=document.createElement("span");
　　 //spanElem.style.fontSize="14px";
　　 /*
　　 * 為了支援IE和firefox，這裡只能使用innerHTML
　　 * 其實innerText和innerHTML都不是W3C標準
　　 * 其實在firefox下textContent和IE的innerText等效
　　 */
　　 //spanElem.innerText=this.caption;
　　 spanElem.innerHTML=this.caption;
　　 divElem.appendChild(spanElem);
　　 return(divElem);
}
這裡定義了一個Band，其中定義了一個ToolItems數組，因為一個Band中包含多個ToolItem
function ToolItem(name,caption,....)
{
　　 this.name = name;
　　 this.caption = caption;
　　 //下面定義其他屬性
　　 ....
}
/*
* 此函數返回每個ToolItem所對應的Dom元素，由幾個部分組成：
* 1、圖片部分；
* 2、標題部分；
* 樣式如：
*　　　*********
*　　　*　圖片 *
*　　　*********
*　　**************
*　　*=　 標題　 =*
*　　**************
*通過下面的Table來實現精確控制
*　 <table>
*　　　 <tr>
*　　　　　 <td>
*　　　　　　　 //這裡放置圖片Div
*　　　　　 </td>
*　　　 </tr>
*　　　 <tr>
*　　　　　 <td>
*　　　　　　　 //這裡放置標題Div
*　　　　　 </td>
*　　　 </tr>
*　 </table>
*/
ToolItem.prototype.ToolItemElement=function()
{
　　 var divElem=document.createElement("div");
　　 divElem.style.width="100%";
　　 divElem.style.background="white";
　　 divElem.style.color="black";
　　 divElem.style.align="center";
　　 //顯示圖片：並且設定相關控制屬性
　　 var imgElem=document.createElement("img");
　　 imgElem.name=this.name;
　　 imgElem.caption=this.caption;
　　 imgElem.src = this.imageURL;
　　 ....
　　 imgElem.onclick=this.ToolItemClick;　//設定事件
　　 //顯示標題：
　　 var spanCaption=document.createElement("span");
　　 /*
　　 * 為了支援IE和firefox，這裡只能使用innerHTML
　　 * 其實innerText和innerHTML都不是W3C標準
　　 * 其實在firefox下textContent和IE的innerText等效
　　 */
　　 //spanCaption.innerText=this.caption;
　　 spanCaption.innerHTML=this.caption;
　　 var table=document.createElement("table");
　　 table.style.width="100%";
　　 table.insertRow(-1);　//這裡必須帶參數-1，否則在firefox中不能正常顯示　
　　 table.insertRow(-1);
　　 var CellImag=table.rows[0].insertCell(-1);
　　 CellImag.appendChild(imgElem);　//圖片部分
　　 //注意，這樣寫是不能工作的：CellImag.style.align="center";
　　 CellImag.align="center";
　　 var CellCaption=table.rows[1].insertCell(-1);
　　 CellCaption.appendChild(spanCaption);　//標題部分
　　 CellCaption.align="center";
　　 divElem.appendChild(table);　//標題部分
　　 return divElem;
}
//其他不如響應事件：imgElem.onclick=this.ToolItemClick;　//設定事件等等，自己可以根據實際情況來寫就可以了

這樣就定義了一個ToolItem對象，總是要包含屬性和方法的，上面講了屬性，下面來介紹方法的定義。比如Band的AddItem方法：

通過這樣的思想，不但代碼結構非常清晰，並且修改，擴充變的非常容易。好了，我給出的是思路，具體實現各位做吧。

實現這麼個東西，從構思到編碼我用了一天半，所以思想上是不難的，關鍵是思路。

下面給各位看看實現的效果圖。 以上就是思路，以及效果圖。