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

核心提示：树形控件是一种人们熟悉的用户界面控件，广泛地用来显示层次型数据，JavaScript面向对象技术实现树形控件， 树形控件具有独特的扩展和折叠分支的能力，能够以较小的空间显示出大量的信息，都可以用相同的方式调用findArea()方法，不用去管被调用的findArea()采用什么公式计算面积，一目了然地传达出数据之间的层

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

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

图一：用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()采用什么公式计算面积，从而有效地隐藏实现细节。