一直以来，我都主要是做winform方面的编程，最近做了点web方面的，所以也研究了几天的javascript。偶有心得故记之：
应用面向对象的思想在javascript中同样适用，关键的是你敢不敢用，想不想用。
我曾使用vs2005编写了一个vs2003工具箱完全类似的导航工具条，我比较喜欢在winform中通过这种方式向用户提供应用程序功能的导航。所以我也想在web中也使用这种方式。网络上这样的例子很多，但是看过以后都感觉编码比较复杂，不容易扩展。所以我决定应用vs2005中开发的经验，用javascript来自己写一个。很多常用的东西自己花费点时间写是我比较喜欢的方法，我不大喜欢使用别人写的，有时候花费在研究别人东西上的时间基本都可以自己写出来了。并且自己写的修改容易，应用容易。。。估计这是一个不怎么好的思想。不过我比较喜欢接受别人的思路，而不喜欢一行行去阅读别人的代码。我研究别人的东西喜欢先看demo。
下面介绍下使用javascript写这么个工具条的思路：
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）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; ithis.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; ithis.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.length0) { 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方法：
通过这样的思想，不但代码结构非常清晰，并且修改，扩展变的非常容易。好了，我给出的是思路，具体实现各位做吧。
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）实现这么个东西，从构思到编码我用了一天半，所以思想上是不难的，关键是思路。
下面给各位看看实现的效果图。 以上就是思路，以及效果图。
