Asp.Net Ajax框架已经为我们提供了组件的设计模型
- Sys.Component:组件的基类,他实现了下面三个接口
- Sys.IDisposable:组件的销毁接口
- Sys.INotifyDisposing:组件销毁的通知接口
- Sys.INotifyPropertyChange:组件属性改变的通知接口
下面是这些基类和接口的成员说明
get_events() | 得到组件的事件列表 |
get_id()/set_id() | 得到/设置组件的ID |
get_isInitialized() | 得到组件是否已经初始化 |
initiialize() | 组件的初始化方法 |
dispose() | 组件的销魂方法 |
raisePropertyChanged() | 抛出组件属性改变事件的方法 |
dispose() | 组件销魂调用的方法 |
add_disposing | 添加组件正在销毁中的事件处理器 |
remove_disposing | 移除组件正在销魂中的事件处理器 |
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);
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 >
< 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 >
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指针传入到函数内部。