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

核心提示： branch对象的构造函数有id和text两个参数，id是一个唯一性的标识符，JavaScript面向对象技术实现树形控件(5)，text是显示在该分支的文件夹之后的文字，leaves数组是该分支对象的子元素的集合，调用数组中每一个对象的write()方法，和branches数组一样，注意

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=http://tech.ddvip.com/2008-11/"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()方法的对象。