解读[cloudgamer]的JavaScript效果

  偶然,在博客园上看到了 cloudgamer 的博客,里面关于JavaScript的文章令我大汗,无论是从效果上还是编程技巧

上都那么令人振奋,原来JavaScript能弄出那么高深的东西来.呵呵,恕我见识浅薄了.下了他的源码,啃....发现刚上手

还真有那么点涩,啃不动,里面的写法都基本不太明白.虽然看过一点面向对象的编程,可对于其中的一些公共函数的作

用却不甚了解.

  就一个Drag的简单实例来说:

function Bind(ob,fHandler)
{
//返回一个函数
    return function()
    {
        //返回一个与ob对象挂钩的函数
        return fHandler.apply(ob,arguments);
    }
}

 

看了老半天,实在是没看明白为什么要多次一举,直接使用函数不就结了,还要多加一个函数来做中转.

 

function Bind(ob,fHandler)
{
//返回一个函数
    return function()
    {
        //返回一个与ob对象挂钩的函数
        return fHandler.apply(ob,arguments);
    }
}
function BindAsListener(ob,fHandler)
{
    return function(event)
    {
        return fHandler.call(ob,(event||window.event));
    }
}
function addEventHandler(ob,sEventType,fHandler)
{
    if(ob.addEventListener)
    {
        ob.addEventListener(sEventType,fHandler,false);
    }
    else if(ob.attachEvent)
    {
        ob.attachEvent("on"+sEventType,fHandler);
    }else{ob["on"+sEventType]=fHandler;}
}
function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};
function New(aClass,aParams)
{
    function new_()
    {
        aClass.initialize.apply(this,aParams);
    }
    new_.prototype=aClass;
    return new new_();
}

var Drag={
    initialize:function(drag)
    {
        this.fM=BindAsListener(this,this.Move);
        this.fS=Bind(this,this.Stop);
        this.Drag=document.getElementById(drag);
        this._x=this._y=0;
        this.Drag.style.position="absolute";
        addEventHandler(this.Drag,"mousedown",BindAsListener(this,this.Start));
    },
    Start:function(oEvent)
    {
        this._x=oEvent.clientX-this.Drag.offsetLeft;
        this._y=oEvent.clientY-this.Drag.offsetTop;
        addEventHandler(document,"mousemove",this.fM);
        addEventHandler(document,"mouseup",this.fS);
    },
    Move:function(oEvent)
    {
        this.Drag.style.left=oEvent.clientX-this._x+"px";
        this.Drag.style.top=oEvent.clientY-this._y+"px";
    },
    Stop:function()
    {
        removeEventHandler(document,"mousemove",this.fM);
        removeEventHandler(document,"mouseup",this.fS);
    }
};

 

研究来研究去,发现原来在使用Move,Start等函数时需要给函数传递一个event参数...直接将函数绑定到

document.onmousemove上时,无法给函数传递参数,所以 只能通过中转函数实现参数的传递.实际上是构造一个

新的函数.只不过新的函数指定了与某一对象挂钩.