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 <numBranches;i )
treeString = this.branches[i].write();
document.write(treeString);
}
addBranch()方法把参数传入的对象加入到branches数组的末尾。writeTree()方法遍历保存在branches数组中的每一个对象,调用每一个对象的write()方法。注意这里利用了多态性的优点:不管branches数组的当前元素是什么类型的对象,我们只需按照统一的方式调用write()方法,实际执行的write()方法由branches数组当前元素的类型决定——可能是branch对象的write()方法,也可能是leaf对象的write()方法。
必须说明的是,虽然java script的Array对象允许保存任何类型的数据,但这里我们只能保存实现了write()方法的对象。象Java这样的纯面向对象语言拥有强健的类型检查机制,能够自动报告类型错误;但java script这方面的限制比较宽松,我们必须手工保证保存到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" 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" border="0">';
leafString = this.text;
leafString = '</a><br>';
return leafString;
}
writeLeaf()函数的作用就是构造出显示当前节点的HTML字符串。leaf对象不需要实现add()方法,因为它是分支的终结点,不包含子元素。
七、装配树形控件
最后要做的就是在HTML页面中装配树形控件了。构造过程很简单:创建一个tree对象,然后向tree对象添加分支节点和叶节点。构造好整个树形结构之后,调用tree对象的write()方法把树形控件显示出来。下面是一个多层的树形结构,只要把它加入标记内需要显示树形控件的位置即可。注意下面例子中凡是应该加入链接的地方都以“#”替代:
<script language="java script">
var myTree = new tree();
var branch1 = new branch('branch1','java script参考书');
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','第二章');
文章整理:西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!



