科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件探讨微软ASP.NET AJAX控件开发技术(客户端)

探讨微软ASP.NET AJAX控件开发技术(客户端)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

本系列文章将通过具体的实例从客户端和服务端两个角度全面探讨ASP.NET AJAX框架中的控件(Control)开发所涉及的技术。

作者:朱先忠 来源:51CTO.com  2007年11月19日

关键字:

  • 评论
  • 分享微博
  • 分享邮件

四、使用JavaScript进行客户端控件编程相关概念

(七)属性

把属性添加到一个控件中是很简单的。在此,推荐使用的方法是在控件构造器中声明一个私有变量,并在prototype部分添加相应的getter及setter属性方法。当访问该属性时,ASP.NET AJAX框架总是添加get_和set_前缀。因此,当添加getter/setter时,我们应该遵循get_propertyName和set_propertyName命名惯例。正如在上面的示例中相应于hoverImageUrl属性所实现的,我们使用get_hoverImage()作为getter,set_hoverImage()作为setter。但是在上面的例子中当我们使用一个$create()语句创建该控件时,我们仅传递了hoverImageUrl,因为ASP.NET AJAX框架将会自动添加set_前缀。与属性有关的另外一个重要问题是,当它的属性改变时如何通知该控件的客户端。下列的代码片断展示了如何激发propertyChanged事件。

set_hoverImageUrl : function(value){
if (this._hoverImageUrl != value)
{
//如果不同于当前值则仅设置新值
this._hoverImageUrl = value;
//激发propertyChanged事件
//注意这是一个位于基类Sys.Component中的方法
this.raisePropertyChanged('hoverImageUrl');
}
}

(八)方法

使用JavaScript编写一个类的方法时,一般不作特殊考虑;但是,我们还是推荐在控件的原型(prototype)对象中添加它们。

【注】就JavaScript本身编程而言,其表达形式多样,但建议你遵循这里推荐的格式(也正是框架相应js源码中所使用的格式)。

(九)事件

在控件类中添加事件类似添加属性。首先,在控件构造器中把事件处理器声明为一个私有变量并在原型对象中创建相应于该事件的一个add/delete方法对。尽管并不要求在模块级声明事件处理器变量,但是,这样做的确存在一些优点,我将在Ajax框架的Function.createDelegate()节讨论这个问题。当添加/删除事件时,Ajax框架总是自动地添加上add_和remove_前缀。因此,当添加事件订阅代码时,该方法应该以add_eventName方式命名;反之,以remove_eventName方式命名。例如,在上面的click事件示例中,我们以add_click和remove_click形式添加事件订阅方法,但是在$create语句中,我们以click方式对它命名,由Ajax框架负责添加add_前缀。如你在上面的示例所见,add_click和remove_click都引用了this.get_event()(继承自Sys.Component)。这个Sys.Component类维持着一个订阅事件的内部列表,存储于一个Sys.EventHandlerList类的实例(以及各自它们的处理器)中。

除了这个get_event()方法对外,还推荐使用raiseEventName方法来激发事件。由于上面所举的仅是一个很基本的例子,所以,我没有在其中使用它。但是,当你想从多处激发同一个事件时你必须添加它。当激发一个事件时,我们可以传递一些称为事件参数的上下文数据。

在事件中传递参数的推荐的方法是,创建一个继承自Sys.EventArgs的新类并构造器中传递要求的参数。针对每一个参数,它将在原型对象部分暴露getter和setter。因为本例非常简单,所以,没有使用这种更一般的方式。
当前在该微软Ajax库中相应于事件参数存在两个内置类—Sys.EventArgs和Sys.CancelEventArgs。即使你有一个不需要任何事件参数的事件,那么,你也应该传递Sys.EventArgs.Empty(例如在上面的ImageButton控件示例中),以便事件订阅者可以遵循相同的模式来处理所有的事件。

如果你细致研究框架源码,你会注意到,其中绝大部分的控件都遵循了相同的模式—使用函数HandleEvent(sender, e)来处理所有事件。注意,这与.NET框架处理事件所实现的模式是相同的。而且,遵循这种方式给人的初始感觉过于复杂,但是却更遵循了一般性规律,便于以后的更复杂设计。

五、其它几个重要的全局客户端方法

下列,我们列出在开发客户端控件时,一些常用(有些是必用的)的重要方法。

$get()

这个方法是我们以前常用的Document.getElementById方法的一个快捷方式。此方法使用一个可选的父级DOM元素;如果没有指定这个父元素,那么,搜索操作将从Document对象开始执行。

$create()

这个方法是Sys.Component.Create方法的一个快捷方式,用于实例化一个客户端组件,行为或控件。这个方法的完整定义如下所示:

$create(type, properties, events, references, element);

举例:

$create(AjaxImageButtonNamespace.MyCliImageButton, 
{'hoverImageUrl':'Images/updateh.gif'},
{'click':buttonClicked}, null, $get('cliBtn'));

在此,第一个参数使用了对象的完整类型名。例如,当创建一个MyCliImageButton控件时,我们需要传递AjaxImageButtonNamespace.MyCliImageButton。这个参数必须存在。

第二个参数对应一个键/值对(每一个一个键/值对对应一个特定属性及其该属性的取值)数组。例如,当创建MyCliImageButton控件时,我们需要要传递hoverImageUrl并给它赋值为{'hoverImageUrl':' Images/update-h.gif'}。如果我们想设置更多的属性,我们需要使用一个逗号来隔开这些键/值对。例如:

{'aProperty':value1, 'bProperty':value2}.

第三个参数与第二个参数几乎相同。这个参数用于定义事件,也使用一个键/值对数组的表示方式。在上面的例子中,我们使用onButtonClick处理器订阅了click事件。

第四个参数使用一个键/值对数组,用于引用那些在创建此组件时所需要使用的组件。既然本例中的图像按钮并没有请求任何对外部组件的引用;所以,我们简单地传递null为这个参数值。

第五个也即是最后一个参数是一个DOM元素。在创建行为和控件时,这是一个必需的参数;但是,对于一个非可视化组件而言,这个参数是可选的。

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章