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?http://www.xvna.com）、展开的分支（open.gif?http://www.xvna.com）和叶节点（doc.gif?http://www.xvna.com）。

下面是树形控件要用到的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?http://www.xvna.com";
var closedImg = new ..Asset not found..;
closedImg.src = "closed.gif?http://www.xvna.com";

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?http://www.xvna.com')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
< /script>

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

四、tree对象

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

function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}

tree对象代表着整个树形结构的根。tree()构造函数创建了branches数组，这个数组用来保存所有的子元素。add和write属性是指向两个多态性方法的指针，两个多态性方法的实现如下：

function addBranch(branch){
this.branches[this.branches.length] = branch;
}

function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i treeString += this.branches[i].write();
document.write(treeString);
}

addBranch()方法把参数传入的对象加入到branches数组的末尾。writeTree()方法遍历保存在branches数组中的每一个对象，调用每一个对象的write()方法。注意这里利用了多态性的优点：不管branches数组的当前元素是什么类型的对象，我们只需按照统一的方式调用write()方法，实际执行的write()方法由branches数组当前元素的类型决定——可能是branch对象的write()方法，也可能是leaf对象的write()方法。

必须说明的是，虽然JavaScript的Array对象允许保存任何类型的数据，但这里我们只能保存实现了write()方法的对象。象Java这样的纯面向对象语言拥有强健的类型检查机制，能够自动报告类型错误；但JavaScript这方面的限制比较宽松，我们必须手工保证保存到branches数组的对象具有正确的类型。

五、branch对象

branch对象与tree对象相似：

function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}

branch对象的构造函数有id和text两个参数。id是一个唯一性的标识符，text是显示在该分支的文件夹之后的文字。leaves数组是该分支对象的子元素的集合。注意branch对象定义了必不可少的write()方法，因此可以保存到tree对象的branches数组。tree对象和branch对象都定义了write()和add()方法，所以这两个方法都是多态性的。下面是branch对象的add()和write()方法的具体实现：

function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}

function writeBranch(){
var branchString =
'< span class="branch" ' + onClick="showBranch(\'' + this.id + '\')"';
branchString += '>< img src="closed.gif?http://www.xvna.com" id="I' + this.id + '">' + this.text;
branchString += '< /span>';
branchString += '< span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for (var j=0;j< numLeaves;j++) branchString += this.leaves[j].write();
branchString += '< /span>';
return branchString;
}

addLeaf()函数和tree对象的addBranch()函数相似，它把通过参数传入的对象加入到leaves数组的末尾。

writeBranch()方法首先构造出显示分支所需的HTML字符串，然后通过循环遍历leaves数组中的每一个对象，调用数组中每一个对象的write()方法。和branches数组一样，leaves数组也只能保存带有write()方法的对象。

六、leaf对象

leaf对象是三个对象之中最简单的一个：

function leaf(text, link){
this.text = text;
this.link = link;
this.write = writeLeaf;
}

leaf对象的text属性表示要显示的文字，link属性表示链接。如前所述，leaf对象也要定义write()方法，它的实现如下：

function writeLeaf(){
var leafString = '< a href="' + this.link + '">';
leafString += '< img src="doc.gif?http://www.xvna.com" border="0">';
leafString += this.text;
leafString += '< /a>< br>';
return leafString;
}

writeLeaf()函数的作用就是构造出显示当前节点的HTML字符串。leaf对象不需要实现add()方法，因为它是分支的终结点，不包含子元素。

七、装配树形控件

最后要做的就是在HTML页面中装配树形控件了。构造过程很简单：创建一个tree对象，然后向tree对象添加分支节点和叶节点。构造好整个树形结构之后，调用tree对象的write()方法把树形控件显示出来。下面是一个多层的树形结构，只要把它加入标记内需要显示树形控件的位置即可。注意下面例子中凡是应该加入链接的地方都以“#”替代：

< script language="JavaScript">
var myTree = new tree();
var branch1 = new branch('branch1','JavaScript参考书');
var leaf1 = new leaf('前言','#');
var leaf2 = new leaf('绪论','#');
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);

var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','#'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);

var branch3 = new branch('branch2','第二章');
branch3.add(new leaf('第一节','#'));
branch3.add(new leaf('第二节','#'));
branch3.add(new leaf('第三节','#'));
branch1.add(branch3);

myTree.add(new leaf('联系我们','#'));
myTree.write();
< /script>

上述代码的运行效果如图一所示。可以看到，装配树形控件的代码完全符合面向对象的风格，简洁高效。

从本质上看，用面向对象技术构造的树形控件包含一组对象，而且这组对象实现了纯面向对象的语言中称为接口的东西，只不过由于JavaScript语言本身的限制，接口没有明确定义而已。例如，本文的树形控件由tree、branch、leaf三个对象构成，而且这三个对象都实现了write接口，也就是说，这三个对象都有一个write()方法，不同对象的write()方法根据对象类型的不同提供不同的功能。又如，tree、branch对象实现了add接口，两个对象分别根据自身的需要定义了add()方法的不同行为。可见，多态性是面向对象技术中一个重要的概念，它为构造健壮的、可伸缩的、可重用的代码带来了方便。