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的相关例子，在下面说明一下

1. 在改变属性时应该先判断一下外部传入的值是否和当前值不一样，如果不一样，在修改属性值之后可以调用raisePropertyChange方法，参数为当前的属性名，将PropertyChange事件抛出到页面，让页面能获取到哪个属性被修改了。
2. PropertyChange的方法签名为sender和args，sender当然表明这个事件是哪个组件触发的。args中可以通过ge_propertyName得到我们在组件中调用raisePropertyChange方法的参数。如果我们要得到sender（也就是组件）改变的属性的改变后的值可以使用sender["get_" + propertyName].apply(sender)来得到。在这里sender是作为一个字典来使用，并且通过apply方法将sender作为函数的this指针传入到函数内部。