三、 创建定制行为组件—MyHoverBehavior
根据我们以前的讲解,我们现在的任务就是使用JavaScript代码把客户端逻辑封装到一个定制行为中。下面,让我们作详细剖析。
【作者注】为了更好地理解MS AJAX倡导及推出的面向对象JavaScript技术,在本部分我们故意模拟了MS AJAX脚本库的表达形式,即以独立的函数方式而不是以内联方式定义所有的属性存取器函数,方法及事件等。
(一) Prototype定义
首先,象往常一样,在定义完命名空间和类构造器之后,我们要在prototype块中声明私有属性,声明这些属性相关的get及set存取器函数,要重载的父类的方法initialize和dispose,以及所有相关的事件处理器。见如下代码:
清单1—定制行为的prototype块代码
ZXZSamples.MyHoverBehavior.prototype = {这里,我们定义了字段_hoverElement以指定此行为将被绑定到的DOM元素,字段_unhoverDelay用于指定鼠标悬浮于目标上的最大时限(也就是说经_unhoverDelay秒后目标的样式将发生相应改变),字段_hoverCount则用于记忆鼠标移动到目标上的次数。另外两个处理器字段—_hoverHandler和_unHoverHandler用来描述事件代理。这两个代理将由定制行为使用,用以把mouseover/focus和mouseout/blur事件数据关联到两个相应的事件处理器—_onhover和_onunhover上。
_hoverElement : null,
_unhoverDelay : 0,
_hoverCount : 0,
_hoverHandler : null,
_unHoverHandler : null,
get_hoverElement: ZXZSamples$MyHoverBehavior$get_hoverElement,
set_hoverElement: ZXZSamples$MyHoverBehavior$set_hoverElement,
get_unhoverDelay: ZXZSamples$MyHoverBehavior$get_unhoverDelay,
set_unhoverDelay: ZXZSamples$MyHoverBehavior$set_unhoverDelay,
initialize: ZXZSamples$MyHoverBehavior$initialize,
dispose: ZXZSamples$MyHoverBehavior$dispose,
add_hover: ZXZSamples$MyHoverBehavior$add_hover,
remove_hover: ZXZSamples$MyHoverBehavior$remove_hover,
_onhover: ZXZSamples$MyHoverBehavior$_onhover,
add_unhover: ZXZSamples$MyHoverBehavior$add_unhover,
remove_unhover: ZXZSamples$MyHoverBehavior$remove_unhover,
_onunhover: ZXZSamples$MyHoverBehavior$_onunhover,
_delayedUnhoverHandler:ZXZSamples$MyHoverBehavior$_delayedUnhoverHandler
}
(二) 初始化和事件处理
现在,让我们来讨论一下方法initialize。列表2给出了相应的代码实现。
清单2—initialize方法
function ZXZSamples$MyHoverBehavior$initialize() {这里,我们首先调用了基类的方法initialize。然后,我们调用MS AJAX框架内置的全局方法Function.createDelegate把两个事件代理_hoverHandler和_unHoverHandler分别绑定到两个事件处理器_onhover和_onunhover上。注意,当用户指定属性_unhoverDelay时,我们调用了事件处理器函数_delayedUnhoverHandler,该函数又进一步“包装”了处理器_onunhover,为的是当鼠标悬浮于(或焦点会聚于)目标上时可以通过window.setTimeout方法来较好地处理时间延迟的问题。一旦创建这些代理,就可以使用它们并借助于来MS AJAX全局方法$addHandler把相应事件直接“钩”到事件处理器上。有关全局方法$addHandler,在此不赘述,读者可以参考在线资源。
ZXZSamples.MyHoverBehavior.callBaseMethod(this, 'initialize');
this._hoverHandler = Function.createDelegate(this, this._onhover);
this._unHoverHandler = Function.createDelegate(this, this._unhoverDelay? this._delayedUnhoverHandler :this._onunhover);
$addHandler(this.get_element(), "mouseover", this._hoverHandler);
$addHandler(this.get_element(), "focus", this._hoverHandler);
$addHandler(this.get_element(), "mouseout", this._unHoverHandler);
$addHandler(this.get_element(), "blur", this._unHoverHandler);
if (this._hoverElement){
$addHandler(this._hoverElement, "mouseover", this._hoverHandler);
$addHandler(this._hoverElement, "focus", this._hoverHandler);
$addHandler(this._hoverElement, "mouseout", this._unHoverHandler);
$addHandler(this._hoverElement, "blur", this._unHoverHandler);
}
}