在上次把TreeView的事件支持实现后，整个TreeView的主体也就完成了。但是由于在UI元素的管理上，使用了Script类对象和DOM对象间的环状链表引用，所以还必须在页面退出时作一些清理工作，也就是为每个类都实现一个Dispose方法。
我们的TreeView一共使用了3个类，Tree、TreeNodeBase和TreeNode。Script类对象和DOM对象间的环状链表引用是在TreeNodeBase中产生的，所以我们在TreeNodeBase的Dispose中做清理工作，代码如下：
TreeNodeBase.prototype.Dispose =
function()
{
if (
this.m_Element )
{
this.m_Element.clearAttributes();
this.m_Element.removeNode(
true);
this.m_Element =
null;
}
for (
var key
in
this )
{
delete
this[key];
}
};
本来清理完了Script类对象和DOM对象间的环状链表引用后，IE的内存占用似乎是可以被释放的，不过后来发现还是有Memory Leak现象，并且bindows的组件类在Dispose的时候，把事件和一些对象引用也都清空掉了。所以我们也把TreeNode和Tree中的引用清理掉，TreeNode代码如下：
TreeNode.prototype.Dispose =
function()
{
if (
this.m_Element )
{
var tr =
this.m_Element;
if ( tr.Content )
{
var tdContent = tr.Content;
tdContent.onmousedown =
null;
tdContent.onmouseover =
null;
tdContent.onmouseout =
null;
tdContent.onmousemove =
null;
tdContent.oncontextmenu =
null;
}
tr.OpIcon.onclick =
null;
if ( tr.CheckBox )
{
tr.CheckBox.onclick =
null;
}
if (
this.m_ChildTree )
{
this.m_ChildTree.Dispose();
}
this.base.Dispose.Call(
this);
}
};
Tree类的Dispose方法，主要是为了清除对象TreeView对象和其Container之间的循环引用，代码为：
Tree.prototype.Dispose =
function()
{
if (
this.m_Element )
{
var tbl =
this.m_Element;
tbl.onselectstart =
null;
this.m_Element.clearAttributes();
this.m_Element =
null;
}
if (
this.m_Container )
{
var elmt =
this.m_Container;
elmt.clearAttributes();
elmt.onkeydown = '';
this.m_Container =
null;
}
for (
var i=0 ; i <
this.m_Count ; ++i )
{
var node =
this.m_Nodes[i];
node.Dispose();
delete
this.m_Nodes[i];
}
for (
var key
in
this )
{
delete
this[key];
}
};
到此一个完整的TreeView控件就完全完成了。当然这只是我实现的一个方案，我认为这个设计中的最可取之处是其UI元素的布局(在 第一节里也有说明)。其它的实现细节可以说都是仁者见仁智者见智的问题，当然如果你有更好的设计想法，欢迎提出来参考或讨论。
本TreeView控件不提供完全的源码下载，因为居然有人有这样的 想法，真是让我不知道该说什么好。虽然没有完整的源码，但如果你是在认真的设计一个Web版的TreeView，我觉得这一系列拙文能让你觉得更有意义和收获。
我们的TreeView一共使用了3个类，Tree、TreeNodeBase和TreeNode。Script类对象和DOM对象间的环状链表引用是在TreeNodeBase中产生的，所以我们在TreeNodeBase的Dispose中做清理工作，代码如下：
TreeNodeBase.prototype.Dispose =
function()
{
if (
this.m_Element )
{
this.m_Element.clearAttributes();
this.m_Element.removeNode(
true);
this.m_Element =
null;
}
for (
var key
in
this )
{
delete
this[key];
}
};
本来清理完了Script类对象和DOM对象间的环状链表引用后，IE的内存占用似乎是可以被释放的，不过后来发现还是有Memory Leak现象，并且bindows的组件类在Dispose的时候，把事件和一些对象引用也都清空掉了。所以我们也把TreeNode和Tree中的引用清理掉，TreeNode代码如下：
TreeNode.prototype.Dispose =
function()
{
if (
this.m_Element )
{
var tr =
this.m_Element;
if ( tr.Content )
{
var tdContent = tr.Content;
tdContent.onmousedown =
null;
tdContent.onmouseover =
null;
tdContent.onmouseout =
null;
tdContent.onmousemove =
null;
tdContent.oncontextmenu =
null;
}
tr.OpIcon.onclick =
null;
if ( tr.CheckBox )
{
tr.CheckBox.onclick =
null;
}
if (
this.m_ChildTree )
{
this.m_ChildTree.Dispose();
}
this.base.Dispose.Call(
this);
}
};
Tree类的Dispose方法，主要是为了清除对象TreeView对象和其Container之间的循环引用，代码为：
Tree.prototype.Dispose =
function()
{
if (
this.m_Element )
{
var tbl =
this.m_Element;
tbl.onselectstart =
null;
this.m_Element.clearAttributes();
this.m_Element =
null;
}
if (
this.m_Container )
{
var elmt =
this.m_Container;
elmt.clearAttributes();
elmt.onkeydown = '';
this.m_Container =
null;
}
for (
var i=0 ; i <
this.m_Count ; ++i )
{
var node =
this.m_Nodes[i];
node.Dispose();
delete
this.m_Nodes[i];
}
for (
var key
in
this )
{
delete
this[key];
}
};
到此一个完整的TreeView控件就完全完成了。当然这只是我实现的一个方案，我认为这个设计中的最可取之处是其UI元素的布局(在 第一节里也有说明)。其它的实现细节可以说都是仁者见仁智者见智的问题，当然如果你有更好的设计想法，欢迎提出来参考或讨论。
本TreeView控件不提供完全的源码下载，因为居然有人有这样的 想法，真是让我不知道该说什么好。虽然没有完整的源码，但如果你是在认真的设计一个Web版的TreeView，我觉得这一系列拙文能让你觉得更有意义和收获。
The End.
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
