JS面向对象、prototype、call()、apply()和实例

001

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

002

<

html

xmlns

=

"http://www.w3.org/1999/xhtml"

>

003

<

head

>

004

<

meta

http-equiv

=

"Content-Type"

content

=

"text/html;charset=utf-8"

/>

005

<

title

>简易拖放效果</

title

>

006

</

head

>

007

<

body

>

008

<

script

>

009

//参考：http://www.javaeye.com/topic/57760

010

//http://jaychaoqun.javaeye.com/blog/392110

011

012

//简化id选择器

013

varisIE=(document.all)?true:false;

014

var$=function(id){

015

return"string"==typeofid?document.getElementById(id):id;

016

};

017

018

//初始化一个Class对象，它有一个成员，是一个方法，这个方法返因另一个方法（方法是对象，所以可以作为参数或者返回值）

019

varClass={

020

create:function(){

021

returnfunction(){//使用new操作符时，就会在新产生的对象上调用这个方法

022

this.initialize.apply(this,arguments);//这里就是调用this对象上的initialize方法，并传递arguments，这里的this是new之后构造出来的对象

023

}

024

}

025

}

026

027

//继承，这里没有用到

028

varExtend=function(destination,source){

029

for(varpropertyinsource){

030

destination[property]=source[property];

031

}

032

}

033

034

//参数传递

035

//object参数，fun方法

036

varBind=function(object,fun){

037

returnfunction(){

038

returnfun.apply(object,arguments);

039

}

040

}

041

042

//事件传递

043

//object参数，fun方法

044

varBindAsEventListener=function(object,fun){

045

returnfunction(event){

046

returnfun.call(object,(event||window.event));

047

}

048

}

049

050

//事件绑定

051

//oTarget绑定目标，sEventType事件类型，fnHandler事件方法

052

functionaddEventHandler(oTarget,sEventType,fnHandler){

053

if(oTarget.addEventListener){//FF

054

oTarget.addEventListener(sEventType,fnHandler,false);

055

}elseif(oTarget.attachEvent){//IE

056

oTarget.attachEvent("on"+sEventType,fnHandler);

057

}else{

058

oTarget["on"+sEventType]=fnHandler;

059

}

060

};

061

062

//移除事件绑定

063

//oTarget绑定目标，sEventType事件类型，fnHandler事件方法

064

functionremoveEventHandler(oTarget,sEventType,fnHandler){

065

if(oTarget.removeEventListener){//FF

066

oTarget.removeEventListener(sEventType,fnHandler,false);

067

}elseif(oTarget.detachEvent){//IE

068

oTarget.detachEvent("on"+sEventType,fnHandler);

069

}else{

070

oTarget["on"+sEventType]=null;

071

}

072

};

073

074

//SimpleDrag是一个方法，方法体，这里相当于一个类

075

varSimpleDrag=Class.create();

076

SimpleDrag.prototype={

077

//对象初始化，实现Class中的this.initialize

078

initialize:function(drag){

079

this.Drag=$(drag);//绑定目标

080

this._x=this._y=0;//初始值

081

this._fnMove=BindAsEventListener(this,this.Move);

082

this._fnStop=Bind(this,this.Stop);

083

this.Drag.style.position="absolute";

084

addEventHandler(this.Drag,"mousedown",BindAsEventListener(this,this.Start));//监听鼠标按下事件

085

},

086

//准备拖动

087

Start:function(oEvent){

088

this._x=oEvent.clientX-this.Drag.offsetLeft;

089

this._y=oEvent.clientY-this.Drag.offsetTop;

090

addEventHandler(document,"mousemove",this._fnMove);//对象开始拖动后，监听鼠标移动事件

091

addEventHandler(document,"mouseup",this._fnStop);//同时监听鼠标放开事件

092

},

093

//拖动

094

Move:function(oEvent){

095

this.Drag.style.left=oEvent.clientX-this._x+"px";

096

this.Drag.style.top=oEvent.clientY-this._y+"px";

097

},

098

//停止拖动

099

Stop:function(){

100

removeEventHandler(document,"mousemove",this._fnMove);

101

removeEventHandler(document,"mouseup",this._fnStop);

102

}

103

};

104

</

script

>

105

<

div

id

=

"idDrag"

style

=

"border:5pxsolid#0000FF;background:#C4E3FD;width:50px;height:50px;"

></

div

>

106

<

script

>

107

newSimpleDrag("idDrag");

108

</

script

>

109

</

body

>

110

</

html

>