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中定义对象的方法,写发完全就是写函数,这对于某些刚开始接触的同志估计不是很适应。

比如:



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方法: 

通过这样的思想,不但代码结构非常清晰,并且修改,扩展变的非常容易。好了,我给出的是思路,具体实现各位做吧。

实现这么个东西,从构思到编码我用了一天半,所以思想上是不难的,关键是思路。

下面给各位看看实现的效果图。 以上就是思路,以及效果图。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页