开发学院网页设计JavaScript Javascript中的面向对象编程实例 阅读

Javascript中的面向对象编程实例

 2010-09-14 13:07:59 来源:WEB开发网   
核心提示:一直以来,我都主要是做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; //设置事件等等,自己可以根据实际情况来写就可以了 

1 2  下一页

Tags:Javascript 面向 对象

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接