Javascript中的面向对象编程实例

核心提示：一直以来，我都主要是做winform方面的编程，Javascript中的面向对象编程实例，最近做了点web方面的，所以也研究了几天的javascript，这里只能使用innerHTML * 其实innerText和innerHTML都不是W3C标准 * 其实在firefox下textContent和IE的innerTe

一直以来，我都主要是做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;　//设置事件等等，自己可以根据实际情况来写就可以了