zoukankan      html  css  js  c++  java
  • 新瓶旧酒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
    [源码下载]
  • 相关阅读:
    CF763C Timofey and Remoduling
    CF762E Radio Stations
    CF762D Maximum Path
    CF763B Timofey and Rectangles
    URAL1696 Salary for Robots
    uva10884 Persephone
    LA4273 Post Offices
    SCU3037 Painting the Balls
    poj3375 Network Connection
    Golang zip压缩文件读写操作
  • 原文地址:https://www.cnblogs.com/webabcd/p/762024.html
Copyright © 2011-2022 走看看