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

核心提示： JavaScript语言不支持以类为基础的继承，但仍具有支持多态性的能力，JavaScript面向对象技术实现树形控件(2)，JavaScript的继承是一种基于原型(Prototype)的继承，实际上，另外，tree和branch对象各有一个add()方法，正如本文例子所显示的，这种继承

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()方法，分别用来向各自所属的对象添加子对象。