ASP.NET AJAX Client Library: 更繁？更简？

这两周周末终于决定忙里偷闲，利用业余时间好好学习ASP.NET AJAX，虽然服务器端控件比如UpdatePanel、Timer等很好用，不过总感觉雾里看花，没法看到ASP.NET AJAX的原貌，所以决定花些时间学习它的Client Library。断断续续看了一些资料，在稍微了解大概之后决定用它写点东西检验一下学习成果，毕竟实际动手才能证明我确实掌握了这门技术，而不仅是纸上谈兵，呵呵。

拖拽效果目前非常流行，比如Pageflakes、protopage等都频繁使用了这项技术用以改善用户体验并且获得良好的赞誉。很多人对这项技术深感恐惧，好像它是一门极为高深的技术，我在很多论坛上看到好些人都在“冰天雪地裸体后空翻720度”求教具体如何实现，实际上这项技术本身并不复杂，简单的拖拽效果区区几十行代码就可以搞定了。下面就简单实现一个拖拽DIV的效果。

首先不考虑ASP.NET AJAX，用最原始的Javascript来实现我们想要的效果，区区二十余行代码就可以了，相信任何有点Javascript基础的同志都可以看得很明白，因此我就不多说了，贴代码了事：

可移动的Div（1）：MovableDiv
function MovableDiv(id) {
    this.obj = document.getElementById(id);

    this.obj.onmousedown = function() {
        if (event.srcElement != this) return;
        
        this._deltaX = event.x - this.offsetLeft;
        this._deltaY = event.y - this.offsetTop;
        this._dragging = true;
        this.setCapture();
    };

    this.obj.onmousemove = function() {
        if (this._dragging) {
            var x = event.x - this._deltaX;
            x = x < 0 ? 0 : x;
            var y = event.y - this._deltaY;
            y = y < 0 ? 0 : y;
            this.style.left = x + "px";
            this.style.top = y + "px";
        }
    };

    this.obj.onmouseup = function() {
        this._dragging = false;
        this.releaseCapture();
    };
}

具体使用时就是实例化一个MovableDiv对象即可，如"new MovableDiv('div1');"。当然，记得给div1设置position为“absolute”，否则有啥意外我概不负责，呵呵！

好，上面代码完全没有使用任何ASP.NET AJAX的特性，下面利用ASP.NET AJAX Client Library提供的机制实现完全相同功能，呵呵，解释这些代码实在费劲，而且现在不是提倡“代码即文档”嘛，相信大家的能力以及我的编码规范程度（自恋一把，喉喉），同样贴出代码如下：

可移动的Div（2）：WidgetContainer
Type.registerNamespace("Monster");

Monster.WidgetContainer = function(element) {
    Monster.WidgetContainer.initializeBase(this, [element]);
    
    this._mouseDownDelegate = null;
    this._mouseMoveDelegate = null;
    this._mouseUpDelegate = null;
    this._dragging = false;
    this._deltaX = 0;
    this._deltaY = 0;
}

Monster.WidgetContainer.prototype = {

    initialize: function() {
        if (this._mouseDownDelegate === null) {
            this._mouseDownDelegate = Function.createDelegate(this, this._mouseDownHandler);
        }
        $addHandler(this.get_element(), "mousedown", this._mouseDownDelegate);

        if (this._mouseMoveDelegate === null) {
            this._mouseMoveDelegate = Function.createDelegate(this, this._mouseMoveHandler);
        }
        $addHandler(this.get_element(), "mousemove", this._mouseMoveDelegate);
        
        if (this._mouseUpDelegate === null) {
            this._mouseUpDelegate = Function.createDelegate(this, this._mouseUpHandler);
        }
        $addHandler(this.get_element(), "mouseup", this._mouseUpDelegate);
                
        Monster.WidgetContainer.callBaseMethod(this, "initialize");
    },
    
    dispose: function() {
        if (this._mouseDownDelegate) {
            $removeHandler(this.get_element(), "mousedown", this._mouseDownDelegate);
            delete this._moseDownDelegate;
        }
        
        if (this._mouseMoveDelegate) {
            $removeHandler(this.get_element(), "mousemove", this._mouseMoveDelegate);
            delete this._mouseMoveDelegate;
        }
        
        if (this._mouseUpDelegate) {
            $removeHandler(this.get_element(), "mouseup", this._mouseUpDelegate);
            delete this._mouseUpDelegate;
        }
        
        Monster.WidgetContainer.callBaseMethod(this, "dispose");
    },
    
    _mouseDownHandler: function(e) {
        this._dragging = true;
        this._deltaX = e.offsetX;
        this._deltaY = e.offsetY;
        this.get_element().setCapture();
    },
    
    _mouseMoveHandler: function(e) {
        if (!this._dragging) return;
        
        var left = this.get_element().offsetLeft + e.offsetX - this._deltaX;
        left = left < 0 ? 0 : left;
        var top = this.get_element().offsetTop + e.offsetY - this._deltaY;
        top = top < 0 ? 0 : top;
        Sys.UI.DomElement.setLocation(this.get_element(), left, top);
    },

    _mouseUpHandler: function(e) {
        if (this._dragging) {
            this._dragging = false;
            this.get_element().releaseCapture();
        }
    }
}

Monster.WidgetContainer.registerClass("Monster.WidgetContainer", Sys.UI.Control);

if (typeof(Sys) != "undefined") Sys.Application.notifyScriptLoaded();

同样，列出使用方法如下，这里使用了“$create”进行创建，这是创建Sys.Component及其子类如Sys.UI.Control等的简写形式：

创建WidgetContainer
<script type="text/javascript" language="javascript">
    function pageLoad(sender, args) {
        $create(Monster.WidgetContainer, { }, { }, null, $get("div1"));
    }
</script>

在写的过程中我就暗暗皱眉，怎么写了半天还没完？在没用ASP.NET AJAX Client Library之前，我3分钟就把移动效果运行起来了，而现在10分钟都过去了还没搞定！写完一对比，代码量多出N倍，为了实现相同的效果，我居然写了近80行代码，晕死！虽然看起来更OO些，非常像C#这种高级语言，但是这样的效果值得吗？对于熟悉Javascript的开发人员而言，说不定第一种写法更加直观呢！前一阵子不知在什么地方看到这样的评论：ASP.NET AJAX Client Library对JavaScript的封装接近病态！是不是真的如此我不知道，不过从开发效率而言似乎反而降低了？！也许这种写法对后期维护有好处，这也许能弥补一部分损失吧，不过我还是不知道！

注：WidgetContainer是MovableDiv的翻版，但是不知道为什么，如果拖动WidgetContainer所代表的div到浏览器窗口的右边缘或下边缘外，就会出现很诡异的现象，目前位置还不明白为什么，有心的同志可以帮忙看看，谢谢先！

附：由于使用了setCapture和releaseCapture，因此上面的代码只能在IE浏览器中运行。

update @07.04.11 13:48
不过，再仔细看看，在ASP.NET AJAX方式的实现中也就是多了initialize和dispose两个方法，用于初始化和资源释放，不过这样做有什么好处呢？即使我不释放好像也不会造成什么损失吧。有劳对此比较熟悉的大佬给我讲讲，嘿嘿@_@