none
一段js程序,有很多不明白的地方,请高手给解释一下! RRS feed

  • 问题

  • ...这是一个拖动层,可放大缩小的程序
    window.onload=function ()
    {
    .....
    new PerfectDraging//new出来的是一个匿名函数,其实就是执行构造函数初始化了一下,可以这么理解吧?
    (
    oH2Title,//第一个参数
    function ()
    {return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop};},//第二个参数,这里的作用其实就是返回一个对象,这个对象有两个属性,xy不是匿名函数内部的吗?可以这么理解吗?
    function (x, y)//第三个参数,这个xy是从哪来的值?糊涂
    {
    var iSTop=document.body.scrollTop || document.documentElement.scrollTop;
    if(x<0){x=0;}
    else if(x+oMsgbox.offsetWidth>document.documentElement.clientWidth)
    {x=document.body.clientWidth-oMsgbox.offsetWidth;}
    if(y<iSTop)
    {y=iSTop;}
    else if(y+oMsgbox.offsetHeight>document.documentElement.clientHeight+iSTop)
    {y=document.documentElement.clientHeight-oMsgbox.offsetHeight+iSTop;}
    oMsgbox.style.left=x+'px';
    oMsgbox.style.top=y+'px';
    }//第二个参数的xy,和第三个参数的xy是同一个?第二个参数的return起什么作用?怎么理解?
    );
    //上面不就是这样new PerfectDraging(para1,para2,para3);这里隐藏着什么语法?或者什么机制?不懂了,请指教
    .......
    };
    .......
    function PerfectDraging(oElement, fnGetPos, fnOnDrag)
    {
    var obj=this;//这样的目的是什么?this到底是指什么?不是构造函数PerfectDraging?
    this.oElement=oElement;
    this.fnGetPos=fnGetPos;
    this.fnOnDrag=fnOnDrag;
    this.__oStartOffset__={x:0, y:0};//
    this.fnOnMouseUp=function (ev)
    {obj.stopDrag(window.event || ev);//this?如果这有this,是指fnOnMouseUp?};
    //上面直接this不行吗?fnOnMouseUp可以理解为一个方法,也是一个函数,甚至也是一个对象,没错吧,糊涂了!

    .......
    }
    PerfectDraging.prototype.startDrag=function (oEvent)//这里startDrag是PerfectDraging的原型,那么所有的new PerfectDraging出来的对象就有startDrag这个方法
    {
    var oPos=this.fnGetPos();//这个this是指谁?构造函数PerfectDraging?不是startDrag?越来越糊涂了,这里面到底隐藏着什么东西?
    var x=oEvent.clientX;
    ..
    this.__oStartOffset__.x=x-oPos.x;
    ..
    if(this.oElement.setCapture)
    {
    this.oElement.setCapture();
    this.oElement.onmouseup=this.fnOnMouseUp;
    this.oElement.onmousemove=this.fnOnMouseMove;
    }
    else
    {..}
    };
    PerfectDraging.prototype.stopDrag=function (oEvent)
    {.....};
    PerfectDraging.prototype.doDrag=function (oEvent)
    {.....};
    2010年12月30日 3:31

答案

  • ...这是一个拖动层,可放大缩小的程序
    window.onload=function ()
    {
    .....
    new PerfectDraging//new出来的是一个匿名函数,其实就是执行构造函数初始化了一下,可以这么理解吧?可以这么理解
    (
    oH2Title,//第一个参数
    function ()
    {return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop};},//第二个参数,这里的作用其实就是返回一个对象,这个对象有两个属性,xy不是匿名函数内部的吗?可以这么理解吗?这里的第二参数是一个function,就是我们常说的callback。这个函数被传递给了PerfectDraging的fnGetPos方法,猜测为,PerfectDraging是以怎么样的方法来获取坐标的,或者是谁的坐标
    function (x, y)//第三个参数,这个xy是从哪来的值?糊涂 第三个参数同样也是一个callback,x和y是参数,传递给fnOnDrag,调用这个函数的时候,就相当于fnOnDrag(x, y)
    {
    var iSTop=document.body.scrollTop || document.documentElement.scrollTop;
    if(x<0){x=0;}
    else if(x+oMsgbox.offsetWidth>document.documentElement.clientWidth)
    {x=document.body.clientWidth-oMsgbox.offsetWidth;}
    if(y<iSTop)
    {y=iSTop;}
    else if(y+oMsgbox.offsetHeight>document.documentElement.clientHeight+iSTop)
    {y=document.documentElement.clientHeight-oMsgbox.offsetHeight+iSTop;}
    oMsgbox.style.left=x+'px';
    oMsgbox.style.top=y+'px';
    }//第二个参数的xy,和第三个参数的xy是同一个?第二个参数的return起什么作用?怎么理解?不是同一个,他们之间没有关系。第二个参数的return表示当以后fnGetPos被调用时,返回一个含有两个x和y属性的对象
    );
    //上面不就是这样new PerfectDraging(para1,para2,para3);这里隐藏着什么语法?或者什么机制?不懂了,请指教 关键是para2和para3都是函数,不是一般的实体,比如数字,数组或对象。
    .......
    };
    .......
    function PerfectDraging(oElement, fnGetPos, fnOnDrag)
    {
    var obj=this;//这样的目的是什么?this到底是指什么?不是构造函数PerfectDraging?如果 var a = new PerfectDraging(), 那么this就是a。把this赋给obj是为了在以后的函数中使用自己。比如this.fnOnMouseUp=function (ev){obj.stopDrag(window.event || ev)... 这里的obj就是PerfectDraging生成的实例,可以是之前所说的var a,但这里用this.StopDrag的话,this就不是a了。这是作者的目的。但因为这句比较特殊,用了this.fnOnMouseUp = ,里面使用this.stopDrag也是没有问题的,但是可读性不强。
    this.fnOnDrag=fnOnDrag;
    this.__oStartOffset__={x:0, y:0};//
    this.fnOnMouseUp=function (ev)
    {obj.stopDrag(window.event || ev);//this?如果这有this,是指fnOnMouseUp?};
    //上面直接this不行吗?fnOnMouseUp可以理解为一个方法,也是一个函数,甚至也是一个对象,没错吧,糊涂了!看上面的解释

    .......
    }
    PerfectDraging.prototype.startDrag=function (oEvent)//这里startDrag是PerfectDraging的原型,那么所有的new PerfectDraging出来的对象就有startDrag这个方法 没错!
    {
    var oPos=this.fnGetPos();//这个this是指谁?构造函数PerfectDraging?不是startDrag?越来越糊涂了,这里面到底隐藏着什么东西?这里的this就是PerfectDraging生成的实例,是我们之前所说的var a,因为fnGetPos在this.fnGetPos=fnGetPos;这句中传递过了,所以这里的fnGetPos就是最上面的para2,是一个函数,即function ()
    {return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop};}

    var x=oEvent.clientX;
    ..
    this.__oStartOffset__.x=x-oPos.x;
    ..
    if(this.oElement.setCapture)
    {
    this.oElement.setCapture();
    this.oElement.onmouseup=this.fnOnMouseUp;
    this.oElement.onmousemove=this.fnOnMouseMove;
    }
    else
    {..}
    };
    PerfectDraging.prototype.stopDrag=function (oEvent)
    {.....};
    PerfectDraging.prototype.doDrag=function (oEvent)
    {.....};

    希望楼主可以整理一下代码格式,方便大家阅读。这样能够帮助你的人也会更多。

    A marked answer is appreciated.
    2010年12月31日 5:10
    版主