新瓶舊酒ASP.NET AJAX(2) - 用戶端腳本程式設計（命名空間、類、成員、接口、繼承、枚舉）

新瓶舊酒ASP.NET AJAX(2) - 用戶端腳本程式設計（命名空間、類、成員、接口、繼承、枚舉）

介紹

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用于調用基類的方法 

                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> 

                <input id="btnTestInheritance" value="類、接口和繼承的測試" type="button" btnTestInheritance_ /> 

                枚舉的測試 

                <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> 

        <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 testMessage = new Demo.MessageWithUserId('webabcd', 'hello', d); 

                alert(testMessage.get_userId() + " " + testMessage.get_content() + " " + testMessage.get_publishTime()); 

                alert(testMessage.showContent()); 

                alert(Demo.IContent.isImplementedBy(testMessage)); 

        function selTestEnum_onchange(value)    

                document.body.bgColor = eval("Demo.Color." + value); 

        </script> 

</asp:Content>

運作結果

1、單擊“類的測試”按鈕後

hello 2007-05-28 08:47:11

2、單擊“類、接口和繼承的測試”按鈕後

webabcd hello 2007-05-28 08:48:16

hello

true 

3、選擇“枚舉的測試”的選項後

頁面會變成你選擇的顔色

OK

<a href="http://down.51cto.com/data/100916" target="_blank">[源碼下載下傳]</a>

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/344670，如需轉載請自行聯系原作者