新瓶旧酒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"  onclick ="return btnTestClass_onlick()"   />
     </ p >
     < p >
         < input  id ="btnTestInheritance"  value ="类、接口和继承的测试"  type ="button"  onclick ="return btnTestInheritance_onclick()"   />
     </ 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
[源码下载]