|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
还是要自己一点一点写代码,然后编译,改错再编译好那。还有最重要的是.net的编译环境非常好,你甚是不需要了解太多工具,对于简单的系统,你可以之了解一些语法就哦了。js|web|编程|对象|控件树形控件是一种人们熟习的用户界面控件,普遍地用来显现条理型数据。树形控件具有共同的扩大和折叠分支的才能,可以以较小的空间显现出大批的信息,一览无余地转达出数据之间的条理干系。但凡熟习图形用户界面的用户,都可以自若地使用树形控件。
图一:用javascript完成的树形控件
HTML自己不撑持树形控件,但我们能够经由过程一些javascript剧本代码完成。为了进步控件的可重用性,我们要充实使用javascript劈面向对象编程手艺的撑持。本文的树形控件合用于IE4+和Netscape6.x,应该说这已涵盖了以后的支流扫瞄器。
1、javascript与面向对象
面向对象的编程有三个最基础的观点:承继,封装,多态性。承继和封装这两个观点对照好了解,绝对而言,多态性这个观点就对照难于把握和使用。一样平常而言,多态性是指以多种情势体现的才能。在面向对象编程手艺中,多态性暗示编程言语具有的一种依据对象的数据范例或类的分歧而接纳分歧处置体例的才能。
在“纯”面向对象的言语中,比方Java,多态性一样平常与类的承继密不成分。也就是说,必需界说一品种的条理干系,处于顶真个是笼统类,处于上层的是各类详细的完成。笼统类界说了子类必需完成或掩盖的办法,分歧的子类依据本人的必要以分歧的体例掩盖笼统类的办法。
比方,盘算圆面积和矩形面积的公式完整分歧,依照面向对象的计划思绪,我们要先界说一个笼统类Shape,Sharp类有一个findArea()办法,一切从Shape类派生的子类都必需完成findArea()办法。然后,我们界说一个代表矩形的Rectangle类,一个代表圆的Circle类,这两个类都从Shape类承继。Rectangle类和Circle类分离完成findArea()办法,二者用分歧的盘算公式盘算面积。终极到达如许一个方针:不管对象属于Shape的哪种子类(Rectangle或Circle),都能够用不异的体例挪用findArea()办法,不必往管被挪用的findArea()接纳甚么公式盘算面积,从而无效地埋没完成细节。
javascript言语不撑持以类为基本的承继,但仍具有撑持多态性的才能。javascript的承继是一种基于原型(Prototype)的承继。实践上,正如本文例子所显现的,这类承继体例简化了多态性办法的编写,并且从布局下去看,终极失掉的程序也与纯面向对象言语很靠近。
2、筹办事情
全部树形控件由四部分组成:图形,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埋没节点。
3、剧本计划
本文完成的树形控件包括一个tree对象,tree对象具有一个branches子对象汇合;每个branch(分支)对象又具有一个子对象的汇合。子对象能够是branch对象,也能够是leaf(树叶)对象。一切这三种对象分离完成一个多态性的write()办法,分歧对象的write()办法依据所属对象的分歧而实行分歧的操纵,也就是说:tree对象的write()办法与branch对象的write()办法分歧,branch对象的write()办法又与leaf对象的write()办法分歧。别的,tree和branch对象各有一个add()办法,分离用来向各自所属的对象增加子对象。
在HTML文档的部分到场上面这段代码。这段代码的感化是创立两个Image对象,分离对应分支翻开、折叠形态的文件夹图形。别的另有几个工具函数,用于翻开或折叠恣意分支的子元素,同时依据分支的翻开或折叠形态响应地变更文件夹图形。
<scriptlanguage="javascript">
varopenImg=newImage();
openImg.src="open.gif";
varclosedImg=newImage();
closedImg.src=http://www.163design.net/j/f/"closed.gif";
functionshowBranch(branch){
varobjBranch=document.getElementById(branch).style;
if(objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder(I+branch);
}
functionswapFolder(img){
objImg=document.getElementById(img);
if(objImg.src.indexOf(closed.gif)>-1)
objImg.src=openImg.src;
else
objImg.src=closedImg.src;
}
</script>
代码事后装进图形对象,这有益于进步今后的显现速率。showBranch()函数起首取得参数供应的分支的款式,判别并切换以后款式的显现属性(在block和none之间往返切换),从而构成分支的扩大和折叠效果。swapImage()函数的道理和showBranch()函数基础不异,它起首判别以后分支的图形(翻开的文件夹仍是折叠的文件夹),然后切换图形。
4、tree对象
上面是tree对象的机关函数:
functiontree(){
this.branches=newArray();
this.add=addBranch;
this.write=writeTree;
}
tree对象代表着全部树形布局的根。tree()机关函数创立了branches数组,这个数组用来保留一切的子元素。add和write属性是指向两个多态性办法的指针,两个多态性办法的完成以下:
functionaddBranch(branch){
this.branches[this.branches.length]=branch;
}
functionwriteTree(){
vartreeString=;
varnumBranches=this.branches.length;
for(vari=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()办法。
必需申明的是,固然javascript的Array对象同意保留任何范例的数据,但这里我们只能保留完成了write()办法的对象。象Java如许的纯面向对象言语具有健旺的范例反省机制,可以主动呈报范例毛病;但javascript这方面的限定对照宽松,我们必需手工包管保留到branches数组的对象具有准确的范例。
5、branch对象
branch对象与tree对象类似:
functionbranch(id,text){
this.id=id;
this.text=text;
this.write=writeBranch;
this.add=addLeaf;
this.leaves=newArray();
}
branch对象的机关函数有id和text两个参数。id是一个独一性的标识符,text是显现在该分支的文件夹以后的笔墨。leaves数组是该分支对象的子元素的汇合。注重branch对象界说了必不成少的write()办法,因而能够保留到tree对象的branches数组。tree对象和branch对象都界说了write()和add()办法,以是这两个办法都是多态性的。上面是branch对象的add()和write()办法的详细完成:
functionaddLeaf(leaf){
this.leaves[this.leaves.length]=leaf;
}
functionwriteBranch(){
varbranchString=
<spanclass="branch"+onClick="showBranch(+this.id+)";
branchString+=>;
leafString+=this.text;
leafString+=</a><br>;
returnleafString;
}
writeLeaf()函数的感化就是机关出显现以后节点的HTML字符串。leaf对象不必要完成add()办法,由于它是分支的闭幕点,不包括子元素。
7、拆卸树形控件
最初要做的就是在HTML页面中拆卸树形控件了。机关历程很复杂:创立一个tree对象,然后向tree对象增加分支节点和叶节点。机关好全部树形布局以后,挪用tree对象的write()办法把树形控件显现出来。上面是一个多层的树形布局,只需把它到场标志内必要显现树形控件的地位便可。注重上面例子中但凡应当到场链接的中央都以“#”替换:
<scriptlanguage="javascript">
varmyTree=newtree();
varbranch1=newbranch(branch1,javascript参考书);
varleaf1=newleaf(媒介,#);
varleaf2=newleaf(绪论,#);
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);
varbranch2=newbranch(branch2,第一章);
branch2.add(newleaf(第一节,#));
branch2.add(newleaf(第二节,#));
branch2.add(newleaf(第三节,#));
branch1.add(branch2);
varbranch3=newbranch(branch2,第二章);
branch3.add(newleaf(第一节,#));
branch3.add(newleaf(第二节,#));
branch3.add(newleaf(第三节,#));
branch1.add(branch3);
myTree.add(newleaf(接洽我们,#));
myTree.write();
</script>
上述代码的运转效果如图一所示。能够看到,拆卸树形控件的代码完整切合面向对象的作风,简便高效。
从实质上看,用面向对象手艺机关的树形控件包括一组对象,并且这组对象完成了纯面向对象的言语中称为接口的工具,只不外因为javascript言语自己的限定,接口没有明白界说罢了。比方,本文的树形控件由tree、branch、leaf三个对象组成,并且这三个对象都完成了write接口,也就是说,这三个对象都有一个write()办法,分歧对象的write()办法依据对象范例的分歧供应分歧的功效。又如,tree、branch对象完成了add接口,两个对象分离依据本身的必要界说了add()办法的分歧举动。可见,多态性是面向对象手艺中一个主要的观点,它为机关强健的、可伸缩的、可重用的代码带来了便利。
还得说上一点,就java本质而言,是面相对象的,但是你有没有发现,java也不全是,比如说基本类型,int,那他就是整型而不是对象,转换类型是还得借助包装类。 |
|