新瓶旧酒ASP.NET AJAX(2) - 客户端脚本编程（命名空间、类、成员、接口、继承、枚举）

[索引页]
[源码下载]

新瓶旧酒ASP.NET AJAX(2) - 客户端脚本编程（命名空间、类、成员、接口、继承、枚举）

作者：webabcd


介绍
Microsoft AJAX Library提供了对JavaScript的扩展和对面向对象的支持，并且与.NET框架非常相似。我们来看一下如何实现命名空间、类、成员、接口、继承和枚举。


关键
1、Sys.Type类
    ・Type.registerNamespace("命名空间的名称");
    ・classInstanceVar.registerClass("类名称", 基类（可选）, 接口（可选，多个就顺序写下去）);
    ・typeInstanceVar.registerInterface("接口名称");
    ・ANamespace.AnEnum.registerEnum("枚举名称");
    ・typeVar.initializeBase(初始化基类的实例（一般是this）, [传值给基类构造函数的参数]（可选） ); （返回值为基类的实例）
    ・instanceVar.callBaseMethod(调用基类方法的实例（一般是this）, "基类的方法名称", [传值给基类方法的参数]（可选）);
    ・其它请查看官方文档

2、为了使“partial-page rendering”有效，应该像如下这样引用外部js

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference path="MyScript.js" />
    </Scripts>
</asp:ScriptManager>

 

3、为了使ScriptManager正确的处理脚本，在每一个js文件的结尾处都应该包括如下这句

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 

示例
Sample.js

// 注册一个名为“Demo”的命名控件
Type.registerNamespace( "Demo");

// 定义Demo命名空间下的Message类的构造函数
Demo.Message = function(content, publishTime)    
{
         this._content = content;
         this._publishTime = publishTime;
}

// 定义Demo命名空间下的Message类的方法
Demo.Message.prototype =    
{
        
        get_content: function()    
        {
                 return this._content;
        },
        
        get_publishTime: function()    
        {
                 return this._publishTime.format( "yyyy-MM-dd HH:mm:ss");
        },
        
        toString: function()    
        {
                 return this.get_content() + " " + this.get_publishTime();
        }

}

// 在Demo命名空间下注册Message类
Demo.Message.registerClass('Demo.Message');


// 定义在Demo命名空间下的IContent接口（接口不能有构造函数）
Demo.IContent = function()    
{

}

// 定义Demo命名空间下的IContent接口的方法
Demo.IContent.prototype =    
{
        showContent : function()    
        {
        
        }
}

// 在Demo命名空间下注册IContent接口
Demo.IContent.registerInterface('Demo.IContent');

// 定义Demo命名空间下的MessageWithUserId类的构造函数
// 我们之后要让这个类继承自Demo.Message
// 在构造函数内用initializeBase调用基类的构造函数
Demo.MessageWithUserId = function(userId, content, publishTime)    
{
        Demo.MessageWithUserId.initializeBase( this, [content, publishTime]);
        
         this._userId = userId;
}

// 定义Demo命名空间下的MessageWithUserId类的方法
Demo.MessageWithUserId.prototype =    
{
        get_userId: function()
        {
                 return this._userId;
        },
        
        showContent: function()    
        {
                 return Demo.MessageWithUserId.callBaseMethod( this, 'get_content')
        },
        
         // callBaseMethod用于调用基类的方法
        toString: function()    
        {
                 return this.get_userId() + " " + Demo.MessageWithUserId.callBaseMethod( this, 'toString');
        }
}

// 在Demo命名空间下注册MessageWithUserId类
// 他继承自Demo.Message类和Demo.IContent接口
Demo.MessageWithUserId.registerClass('Demo.MessageWithUserId', Demo.Message, Demo.IContent);


// 定义在Demo命名空间下的Color枚举（枚举不能有构造函数）
Demo.Color = function()    
{

}

// 定义Demo命名空间下的Color枚举的成员
Demo.Color.prototype =    
{
         // “0x”代表16进制，eval一下就会变成10进制的整型
        Red:        0xFF0000,
        Blue:     0x0000FF,
        Green:    0x00FF00,
        White:    0xFFFFFF    
}

// 在Demo命名空间下注册Color枚举
Demo.Color.registerEnum( "Demo.Color");


// 只有对异步回发才需要向脚本文件中的 Sys.Application.notifyScriptLoaded 方法添加调用
// 建议在每一个js文件的结尾处都应该包括如下这句
// 通知ScriptManager这段脚本已经加载完毕
if ( typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 

 

Sample.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs"
        Inherits="ClientScripting_Sample" Title="命名空间,类,成员,接口,继承,枚举" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="Server">
                <scripts>
                        <asp:ScriptReference Path="~/ClientScripting/Sample.js" />
                </scripts>
        </asp:ScriptManagerProxy>
        <p>
                <input id="btnTestClass" value="类的测试" type="button" btnTestClass_onlick()" />
        </p>
        <p>
                <input id="btnTestInheritance" value="类、接口和继承的测试" type="button" btnTestInheritance_ />
        </p>
        <p>
                枚举的测试
                <select id="selTestEnum" onchange="selTestEnum_onchange(options[selectedIndex].value)">
                        <option value="Red">Red</option>
                        <option value="Blue">Blue</option>
                        <option value="Green">Green</option>
                        <option value="White">White</option>
                </select>
        </p>

        <script type="text/javascript">

        function btnTestClass_onlick()    
        {
                var d = new Date();        

                var testMessage = new Demo.Message('hello', d);
                alert(testMessage.get_content() + " " + testMessage.get_publishTime());
                alert(testMessage);

                return false;
        }
        
        function btnTestInheritance_onclick()    
        {
                var d = new Date();        

                var testMessage = new Demo.MessageWithUserId('webabcd', 'hello', d);
                alert(testMessage.get_userId() + " " + testMessage.get_content() + " " + testMessage.get_publishTime());
                alert(testMessage);
                alert(testMessage.showContent());
                alert(Demo.IContent.isImplementedBy(testMessage));

                return false;
        }
        
        function selTestEnum_onchange(value)    
        {
                document.body.bgColor = eval("Demo.Color." + value);
        }
    
        </script>

</asp:Content>

 

运行结果
1、单击“类的测试”按钮后
hello 2007-05-28 08:47:11
hello 2007-05-28 08:47:11

2、单击“类、接口和继承的测试”按钮后
webabcd hello 2007-05-28 08:48:16
webabcd hello 2007-05-28 08:48:16
hello
true 

3、选择“枚举的测试”的选项后
页面会变成你选择的颜色


OK
[源码下载]