动态载入数据的无刷新TreeView控件(9)

在上次把TreeView的事件支持实现后,整个TreeView的主体也就完成了。但是由于在UI元素的管理上,使用了Script类对象和DOM对象间的环状链表引用,所以还必须在页面退出时作一些清理工作,也就是为每个类都实现一个Dispose方法。

    我们的TreeView一共使用了3个类,Tree、TreeNodeBase和TreeNode。Script类对象和DOM对象间的环状链表引用是在TreeNodeBase中产生的,所以我们在TreeNodeBase的Dispose中做清理工作,代码如下:
动态载入数据的无刷新TreeView控件(9) TreeNodeBase.prototype.Dispose = function()
动态载入数据的无刷新TreeView控件(9) {
动态载入数据的无刷新TreeView控件(9)     if ( this.m_Element )
动态载入数据的无刷新TreeView控件(9)     {
动态载入数据的无刷新TreeView控件(9)         this.m_Element.clearAttributes();
动态载入数据的无刷新TreeView控件(9)         this.m_Element.removeNode(true);
动态载入数据的无刷新TreeView控件(9)         this.m_Element = null;
动态载入数据的无刷新TreeView控件(9)     }
动态载入数据的无刷新TreeView控件(9)     for ( var key in this )
动态载入数据的无刷新TreeView控件(9)     {
动态载入数据的无刷新TreeView控件(9)         delete this[key];
动态载入数据的无刷新TreeView控件(9)     }
动态载入数据的无刷新TreeView控件(9) };

    本来清理完了Script类对象和DOM对象间的环状链表引用后,IE的内存占用似乎是可以被释放的,不过后来发现还是有Memory Leak现象,并且bindows的组件类在Dispose的时候,把事件和一些对象引用也都清空掉了。所以我们也把TreeNode和Tree中的引用清理掉,TreeNode代码如下:
动态载入数据的无刷新TreeView控件(9) TreeNode.prototype.Dispose = function()
动态载入数据的无刷新TreeView控件(9) {
动态载入数据的无刷新TreeView控件(9)    if ( this.m_Element )
动态载入数据的无刷新TreeView控件(9)    {
动态载入数据的无刷新TreeView控件(9)         var tr = this.m_Element;
动态载入数据的无刷新TreeView控件(9)         if ( tr.Content )
动态载入数据的无刷新TreeView控件(9)         {
动态载入数据的无刷新TreeView控件(9)             var tdContent = tr.Content;
动态载入数据的无刷新TreeView控件(9)             tdContent.onmousedown = null;
动态载入数据的无刷新TreeView控件(9)             tdContent.onmouseover = null;
动态载入数据的无刷新TreeView控件(9)             tdContent.onmouseout = null;
动态载入数据的无刷新TreeView控件(9)             tdContent.onmousemove = null;
动态载入数据的无刷新TreeView控件(9)             tdContent.oncontextmenu = null;
动态载入数据的无刷新TreeView控件(9)         }
动态载入数据的无刷新TreeView控件(9)
动态载入数据的无刷新TreeView控件(9)         tr.OpIcon.onclick = null;
动态载入数据的无刷新TreeView控件(9)         if ( tr.CheckBox )
动态载入数据的无刷新TreeView控件(9)         {
动态载入数据的无刷新TreeView控件(9)             tr.CheckBox.onclick = null;
动态载入数据的无刷新TreeView控件(9)         }
动态载入数据的无刷新TreeView控件(9)         if ( this.m_ChildTree )
动态载入数据的无刷新TreeView控件(9)         {
动态载入数据的无刷新TreeView控件(9)             this.m_ChildTree.Dispose();
动态载入数据的无刷新TreeView控件(9)         }
动态载入数据的无刷新TreeView控件(9)         this.base.Dispose.Call(this);
动态载入数据的无刷新TreeView控件(9)     }
动态载入数据的无刷新TreeView控件(9) };

    Tree类的Dispose方法,主要是为了清除对象TreeView对象和其Container之间的循环引用,代码为:
动态载入数据的无刷新TreeView控件(9) Tree.prototype.Dispose = function()
动态载入数据的无刷新TreeView控件(9) {
动态载入数据的无刷新TreeView控件(9)    if ( this.m_Element )
动态载入数据的无刷新TreeView控件(9)    {
动态载入数据的无刷新TreeView控件(9)        var tbl = this.m_Element;
动态载入数据的无刷新TreeView控件(9)        tbl.onselectstart = null;
动态载入数据的无刷新TreeView控件(9)        this.m_Element.clearAttributes();
动态载入数据的无刷新TreeView控件(9)        this.m_Element = null;
动态载入数据的无刷新TreeView控件(9)    }
动态载入数据的无刷新TreeView控件(9)    if ( this.m_Container )
动态载入数据的无刷新TreeView控件(9)    {
动态载入数据的无刷新TreeView控件(9)        var elmt = this.m_Container;
动态载入数据的无刷新TreeView控件(9)        elmt.clearAttributes();
动态载入数据的无刷新TreeView控件(9)        elmt.onkeydown = '';
动态载入数据的无刷新TreeView控件(9)        this.m_Container = null;
动态载入数据的无刷新TreeView控件(9)    }
动态载入数据的无刷新TreeView控件(9)    for ( var i=0 ; i < this.m_Count ; ++i )
动态载入数据的无刷新TreeView控件(9)    {
动态载入数据的无刷新TreeView控件(9)        var node = this.m_Nodes[i];
动态载入数据的无刷新TreeView控件(9)        node.Dispose();
动态载入数据的无刷新TreeView控件(9)        delete this.m_Nodes[i];
动态载入数据的无刷新TreeView控件(9)    }
动态载入数据的无刷新TreeView控件(9)    for ( var key in this )
动态载入数据的无刷新TreeView控件(9)    {
动态载入数据的无刷新TreeView控件(9)        delete this[key];
动态载入数据的无刷新TreeView控件(9)    }
动态载入数据的无刷新TreeView控件(9) };

    到此一个完整的TreeView控件就完全完成了。当然这只是我实现的一个方案,我认为这个设计中的最可取之处是其UI元素的布局(在第一节里也有说明)。其它的实现细节可以说都是仁者见仁智者见智的问题,当然如果你有更好的设计想法,欢迎提出来参考或讨论。

    本TreeView控件不提供完全的源码下载,因为居然有人有这样的想法,真是让我不知道该说什么好。虽然没有完整的源码,但如果你是在认真的设计一个Web版的TreeView,我觉得这一系列拙文能让你觉得更有意义和收获。

    The End.


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

上一篇:【转】解决win7下重装winXP 系统启动选择菜单消失 问题


下一篇:WIN7访问Samba问题