WEB开发网
开发学院网页设计JavaScript JavaScript面向对象技术实现树形控件 阅读

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

 2010-09-14 13:25:58 来源:WEB开发网   
核心提示: 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()方法,分别用来向各自所属的对象添加子对象。

上一页  1 2 3 4 5 6  下一页

Tags:JavaScript 面向 对象

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接