Script.aculo.us开发系列(五):Prototype封装的艺术

核心提示：将自己写的一些东西分装起来是一件很有学问的事情,特别是用javascript这门并不是很支持面向对象的语言,这篇文章将介绍封装上篇文章中提到的那个动画.文章之叫做"Prototype封装的艺术",是因为是利用Prototype这个框架封装自己的类.可能用到的首先是原型的概念,原型prototype是

将自己写的一些东西分装起来是一件很有学问的事情,特别是用javascript这门并不是很支持面向对象的语言,这篇文章将介绍封装上篇文章中提到的那个动画.文章之叫做"Prototype封装的艺术",是因为是利用Prototype这个框架封装自己的类.

可能用到的

首先是原型的概念,原型prototype是区别于Prototype这个框架的,可以利用原型动态的给予类新的方法和属性.

Prototype框架中Function扩展的bind()方法和bindAsEventListener() 方法,他们的使用方法是:functionName.bindAsEventListener(obj) ,其中obj是指向调用该函数的对象,通俗的说,要在函数中使用this.来访问类中的成员就可以使用该方法,同时functionName(oEvent)接受当前的事件对象

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lib/Effect.MoveAndResizeTo.js"></script>
<script type="text/javascript">
function init()
{
　　new AmazonPop("divSource","divTarget",{duration:0.1});
}
Event.observe(window,'load',init);
　　
var AmazonPop=Class.create();//create()方法其实是在调用initialize()方法
AmazonPop.prototype={
　　initialize:function (source,target)//构造函数
　　{
　　　　this.Source=source;//this 相当于容器,记录属性和方法
　　　　this.Target=target;
　　　　this.options=arguments[2]||{zIndex:10,duration:0.2};//选项的默认值
　　　　
　　　　//Create the Animaiton Layer
　　　　var animation=document.createElement("div");
　　　　animation.id="animation";
　　　　document.body.appendChild(animation);
　　　　this.Animation="animation";
　　　　
　　　　$("animation").setStyle({'border':'solid 1px #cbcbcb','position':'absolute'});
　　　　$("animation").setStyle({'z-index':this.options.zIndex});
　　　　Position.clone(source,this.Animation);//Position.clone(),直接将source的坐标大小复制给Animation
　　　　
　　　　this._calculate(null);//计算source的坐标和大小
　　　　
　　　　this.isBinded=false;//方法是否绑定上
　　　　this.inRunning=false;//动画正在"播放"
　　　　　　　　
　　　　$(target).hide();
　　　　$(this.Animation).hide();
　　　　/**//*监听Source的MouseOver事件,注意handleSourceMouseOver.bindAsEventListener(this)*/
　　　　Event.observe($(this.Source),'mouseover',this.handleSourceMouseOver.bindAsEventListener(this));　　　　
　　　　Event.observe(window,'resize',this._calculate.bindAsEventListener(this));//Caculate Again when Window is resized!
　　　　Event.observe($(this.Source),"mouseout",this.handleTargetMouse.bindAsEventListener(this));
　　},
　　_calculate:function (oEvent)
　　{
　　　　this.targetTop=Position.cumulativeOffset($(this.Target))[1];
　　　　this.targetLeft=Position.cumulativeOffset($(this.Target))[0];
　　　　this.targetWidth=$(this.Target).getWidth();
　　　　this.targetHeight=$(this.Target).getHeight();
　　　　
　　　　this.sourceTop=Position.cumulativeOffset($(this.Source))[1];
　　　　this.sourceLeft=Position.cumulativeOffset($(this.Source))[0];
　　　　this.sourceWidth=$(this.Source).getWidth();
　　　　this.sourceHeight=$(this.Source).getHeight();　　
　　},
　　handleSourceMouseOver:function (oEvent)//接受oEvent参数
　　{
　　　　if(!this.isRunning&& !$(this.Target).visible())
　　　　{
　　　　　　$(this.Animation).show();
　　　　　　this.isRunning=true;
　　　　　　/**//*调用Effect.MoveAndResizeTo效果*/
　　　　　　new Effect.MoveAndResizeTo("animation",this.targetTop,this.targetLeft,this.targetWidth,this.targetHeight,
　　　　　　　　{
　　　　　　　　　　duration:this.options.duration,
　　　　　　　　　　afterFinish:this.ShowFinished.bind(this)//ShowFinished.bind(this),意味着在ShowFinished函数中可以用this引用当前对象AmazonPop
　　　　　　　　}
　　　　　　);　　　　
　　　　}　　
　　　　
　　},
　　ShowFinished:function(obj)
　　{
　　　　$(this.Target).show();
　　　　$(this.Animation).hide();
　　　　Event.observe($(this.Target),"mouseover",this.handleTargetMouseOver.bindAsEventListener(this));
　　　　this.isRunning=false;
　　　　
　　},
　　handleTargetMouseOver:function(oEvent)
　　{
　　　　if(!this.isBinded&& !this.isRunning)
　　　　{
　　
　　　　　　Event.observe($(this.Target),"mouseover",this.handleTargetMouse.bindAsEventListener(this));
　　　　　　Event.observe($(this.Target),"mousemove",this.handleTargetMouse.bindAsEventListener(this));
　　　　　　Event.observe($(this.Target),"mouseout",this.handleTargetMouse.bindAsEventListener(this));
　　　　　　
　　　　　　this.isBinded=true;
　　　　}
　　},
　　handleTargetMouse:function(oEvent)
　　{
　　　　if(!this.isRunning)
　　　　{
　　　　　　
　　　　　　if(Position.within($(this.Target),oEvent.clientX,oEvent.clientY))
　　　　　　{
　　　　　　　　return ;
　　　　　　}
　　　　　　
　　　　　　$(this.Animation).show();
　　　　　　this.isRunning=true;
　　　　　　new Effect.MoveAndResizeTo(this.Animation,this.sourceTop,this.sourceLeft,this.sourceWidth,this.sourceHeight,{duration:this.options.duration,afterFinish:this.HideFinished.bind(this)});　　
　　　　}
　　},
　　HideFinished:function (obj)
　　{
　　　　$(this.Target).hide();
　　　　$(this.Animation).hide();
　　　　this.isRunning=false;
　　}
　　
};
　　
</script>