Asp.Net Ajax 学习笔记23 利用Microsoft AJAX Library开发客户端组件（上）

Asp.Net Ajax框架已经为我们提供了组件的设计模型

Sys.Component：组件的基类，他实现了下面三个接口

Sys.IDisposable：组件的销毁接口

Sys.INotifyDisposing：组件销毁的通知接口

Sys.INotifyPropertyChange：组件属性改变的通知接口

下面是这些基类和接口的成员说明

Sys.Component

get_events()	得到组件的事件列表
get_id()/set_id()	得到/设置组件的ID
get_isInitialized()	得到组件是否已经初始化
initiialize()	组件的初始化方法
dispose()	组件的销魂方法
raisePropertyChanged()	抛出组件属性改变事件的方法

Sys.IDisposable

dispose()

组件销魂调用的方法

Sys.INotifyDisposing

add_disposing	添加组件正在销毁中的事件处理器
remove_disposing	移除组件正在销魂中的事件处理器

Sys.INotifyPropertyChange

add_propertyChanged()	添加组件属性改变的事件处理器
remove_disposing	移除组件属性改变的事件处理器

Sys.Component下有两个派生类

Sys.UI.Control：封装DOM元素，概念上为一个（组合）控件

Sys.UI.Behavior：扩展DOM元素，提供额外功能

直接继承Component将不提供可视功能，继承Control和Behavior可提供可视功能。因为Control和Behavior类封装了DOM

全局容器：Sys._Application为一个全局容器类， 维护着全局的所有Component对象的生命周期。注意，所有的控件都必须在Load时才能使用Initialize和Dispose时不能时候。

下面有一个小例子，来示例如何简单开发一个继承于Component类的用户组件

首先一个继承与Component类的组件


// JScript 文件


Type.registerNamespace("Demo");


Demo.SimpleComponent = function()




...{


//调用基类的构造函数


Demo.SimpleComponent.initializeBase(this);


}




Demo.SimpleComponent.prototype =




...{


//重写initialize方法


initialize : function()




...{


//调用基类的initialize方法，注意这段代码放在我们代码之前


Demo.SimpleComponent.callBaseMethod(this, "initialize");


alert("I have been initialized!");


},




//重写dispose方法


dispose : function()




...{


alert("I have start dispose right now");


//调用基类的dispose方法，注意这段代码放在我们的代码之后


Demo.SimpleComponent.callBaseMethod(this, "dispose");


},




//组件的公开方法


sayHi : function()




...{


alert("Hello, I am the first Component");


}


}




//注册类，基类为Sys.Component类


Demo.SimpleComponent.registerClass("Demo.SimpleComponent", Sys.Component);



首先我们需要通过ScriptManager引入组件类的js文件


<asp:ScriptManager ID="ScriptManager1" runat="server">




<Scripts>...


<asp:ScriptReference Path="~/SampleComponent.js" />


</Scripts>


</asp:ScriptManager>

下面是如何使用组件的代码


<script language="javascript" type="text/javascript">


function pageInit()




...{


alert("Page is initialized!");


//使用$create来创建一个组件，在pageInit方法中


//就算调用$create创建组件之后，仍然不能使用这个组件


$create(


Demo.SimpleComponent,


//使用json字符串的方式给组件的属性赋值，


//这里是给ID属性赋值，还可以扩展




...{"id" : "simpleComponent"},


//使用json字符串的方式给组件的事件添加事件处理器。




...{"disposing": onDisposing}


);


}




//页面默认的pageLoad事件处理器


function pageLoad()




...{


//通过Asp.Net Ajax提供的$find方法找到组件


var simpleComponent = $find("simpleComponent");


simpleComponent.sayHi();


}




//组件的销毁中事件处理器


function onDisposing()




...{


alert("Component is Disposing");


}




//给Application全局对象添加init事件的事件处理器


Sys.Application.add_init(pageInit);


</script>

这里要注意一下，在组件内部重写的dispose方法先被触发，表示开始销毁控件了，外部定义的onDisposing方法，表明控件已经正在销魂中了。在dispose方法中还是可以操纵组件的内部成员的，比如说清空指令，避免内存泄漏，但是在onDisposing方法中是不能在操作组件的内部成员了的，因为已经开始销毁组件了。

在这个例子中没有掩饰raisePropertyChange的相关例子，在下面说明一下

在改变属性时应该先判断一下外部传入的值是否和当前值不一样，如果不一样，在修改属性值之后可以调用raisePropertyChange方法，参数为当前的属性名，将PropertyChange事件抛出到页面，让页面能获取到哪个属性被修改了。

PropertyChange的方法签名为sender和args，sender当然表明这个事件是哪个组件触发的。args中可以通过ge_propertyName得到我们在组件中调用raisePropertyChange方法的参数。如果我们要得到sender（也就是组件）改变的属性的改变后的值可以使用sender["get_" + propertyName].apply(sender)来得到。在这里sender是作为一个字典来使用，并且通过apply方法将sender作为函数的this指针传入到函数内部。