JavaScript面向对象技术实现树形控件

　　树形控件是一种人们熟悉的用户界面控件，广泛地用来显示层次型数据。

树形控件具有独特的扩展和折叠分支的能力，能够以较小的空间显示出大量的信息，一目了然地传达出数据之间的层次关系。凡是熟悉图形用户界面的用户，都能够自如地运用树形控件。

图一：用JavaScript实现的树形控件

HTML本身不支持树形控件，但我们可以通过一些JavaScript脚本代码实现。为了提高控件的可重用性，我们要充分运用JavaScript对面向对象编程技术的支持。本文的树形控件适用于IE 4 和Netscape 6.x，应当说这已经涵盖了当前的主流浏览器。

一、JavaScript与面向对象

面向对象的编程有三个最基本的概念：继承，封装，多态性。继承和封装这两个概念比较好理解，相对而言，多态性这个概念就比较难于掌握和运用。一般而言，多态性是指以多种形式表现的能力。在面向对象编程技术中，多态性表示编程语言拥有的一种根据对象的数据类型或类的不同而采取不同处理方式的能力。

在“纯”面向对象的语言中，例如Java，多态性一般与类的继承密不可分。也就是说，必须定义一种类的层次关系，处于顶端的是抽象类，处于下层的是各种具体的实现。抽象类定义了子类必须实现或覆盖的方法，不同的子类根据自己的需要以不同的方式覆盖抽象类的方法。

例如，计算圆面积和矩形面积的公式完全不同，按照面向对象的设计思路，我们要先定义一个抽象类Shape，Sharp类有一个findArea()方法，所有从Shape类派生的子类都必须实现findArea()方法。然后，我们定义一个代表矩形的Rectangle类，一个代表圆的Circle类，这两个类都从Shape类继承。Rectangle类和Circle类分别实现findArea()方法，两者用不同的计算公式计算面积。最终达到这样一个目标：不论对象属于Shape的哪一种子类（Rectangle或Circle），都可以用相同的方式调用findArea()方法，不用去管被调用的findArea()采用什么公式计算面积，从而有效地隐藏实现细节。

JavaScript语言不支持以类为基础的继承，但仍具有支持多态性的能力。JavaScript的继承是一种基于原型（Prototype）的继承。实际上，正如本文例子所显示的，这种继承方式简化了多态性方法的编写，而且从结构上来看，最终得到的程序也与纯面向对象语言很接近。

二、准备工作

整个树形控件由四部分构成：图形，CSS样式定义，HTML框架代码，JavaScript代码。从图一可以看出，树形控件需要三个图形，分别表示折叠的分支（closed.gif）、展开的分支（open.gif）和叶节点（doc.gif）。

下面是树形控件要用到的CSS样式定义：

< style>
body{
font: 10pt 宋体,sans-serif; color: navy; }
.branch{
cursor: pointer;
cursor: hand;
display: block; }
.leaf{
display: none;
margin-left: 16px; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
< /style>

CSS规则很简单：body规则设置了文档的字体和前景（文字）颜色。branch规则的用途是：当鼠标经过拥有子节点的节点时，指针会变成手的形状。之所以要定义两个cursor属性，是因为IE和Netscape使用不同的属性名称。在leaf规则中设置display属性为none，这是为了实现叶节点（不含子节点的最终节点）的折叠效果。在脚本代码中，我们通过把display属性设置成block显示出节点，设置成none隐藏节点。

三、脚本设计

本文实现的树形控件包含一个tree对象，tree对象拥有一个branches子对象集合；每一个branch（分支）对象又拥有一个子对象的集合。子对象可以是branch对象，也可以是leaf（树叶）对象。所有这三种对象分别实现一个多态性的write()方法，不同对象的write()方法根据所属对象的不同而执行不同的操作，也就是说：tree对象的write()方法与branch对象的write()方法不同，branch对象的write()方法又与leaf对象的write()方法不同。另外，tree和branch对象各有一个add()方法，分别用来向各自所属的对象添加子对象。

在HTML文档的部分加入下面这段代码。这段代码的作用是创建两个Image对象，分别对应分支打开、折叠状态的文件夹图形。另外还有几个工具函数，用于打开或折叠任意分支的子元素，同时根据分支的打开或折叠状态相应地变换文件夹图形。

< script language="JavaScript">
var openImg = new ..Asset not found..;
openImg.src = "open.gif";
var closedImg = new ..Asset not found..;
closedImg.src = "closed.gif";

function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' branch);
}

function swapFolder(img){
objImg = document.getElementById(img);
if (objImg.src.indexOf('closed.gif')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
< /script>

代码预先装入图形对象，这有利于提高以后的显示速度。showBranch()函数首先获得参数提供的分支的样式，判断并切换当前样式的显示属性（在block和none之间来回切换），从而形成分支的扩展和折叠效果。swapImage()函数的原理和showBranch()函数基本相同，它首先判断当前分支的图形（打开的文件夹还是折叠的文件夹），然后切换图形。

四、tree对象

下面是tree对象的构造函数：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有