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

核心提示： 六、leaf对象leaf对象是三个对象之中最简单的一个：function leaf(text, link){this.text = text;this.link = link;this.write = writeLeaf;}leaf对象的text属性表示要显示的文字，link属性表示链接，

六、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=http://tech.ddvip.com/2008-11/"doc.gif" 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()方法的不同行为。可见，多态性是面向对象技术中一个重要的概念，它为构造健壮的、可伸缩的、可重用的代码带来了方便。