10.2 如何使用命名空间与类
命名空间（Namespace）是相关类或类型的逻辑分组，用来减少定义对象时可能产生的语意模糊问题。我们通常会将同一类功能的类或类型摆在同一个命名空间中，以便让程序代码显得更有组织。在JavaScript的命名空间中，您可以声明一个或多个下列项目：
·另外一个命名空间。 ·一个枚举。
·一个类。 ·一个委托。
·一个接口。
除了可以自由定义命名空间之外，对于许多不知从何下手的初学者而言，Microsoft AJAX Library已经内置多个JavaScript命名空间，这些命名空间提供为数众多的客户端类，让程序设计员以类为出发点来开发JavaScript程序，表10-2列出了Microsoft AJAX Library所提供的JavaScript命名空间。
除了命名空间之外，ASP.NET AJAX最重要的就是导入了类的概念。程序设计员能够以OOP开发模式，创建派生自ASP.NET AJAX客户端函数库基类或是其他自定义类的JavaScript对象与组件。JavaScript类属于引用类型，与 .NET Framework 类函数库一样，所有的类都是派生自object类（不过此object类与 .NET Framework 的Object类不同）。通过在每一个类名称之前加上所属命名空间的名称与一个英文句点（.），可以确保类名称是全局唯一的（例如：MyNamespace.MyClass）。
JavaScript类可以拥有四种成员：“字段”（Fields）、“属性”（Properties）、“方法”（Methods）与“事件”（Events）。字段与属性是名称与数值的配对组合，用来描述实例的特性。字段由基本类型（Primitive Type）组成，可以通过实例来访问，例如：
myClassInstance.name="Fred"; |
以上面的程序代码而言，表示myClassInstance实例拥有一个名称为name的字段，同时将name字段的值设定为Fred。
属性与字段不同，属性的值可以是任何基本类型（Primitive Type）或引用类型（Reference type），由get与set访问符来访问其内容。在ASP.NET AJAX中，JavaScript以方法的形式代表get与set访问符，通常会使用 get_ 或是 set_ 来当作方法名称的前缀词。例如，如果要访问myClassInstance实例的cancel属性，如下所示，请调用set_cancel或是get_cancel方法：
myClassInstance.set_cancel(true); cancelValue = myClassInstance.get_cancel(); |
所谓的方法就是会执行特定操作，不只是单纯返回一个属性值的函数，而事件则是通知应用程序有特定动作发生的信号。例如，当用户单击窗体上的控件时，控件就会引发Click事件并调用用来处理事件的函数。事件就像是声明发生特定动作的信息，播送信息的动作称为“引发”事件。任何能够引发事件的对象就是“事件传送者”，也称为“事件源”（Event source），窗体、控件和用户定义对象都可以是事件传送者。“事件处理函数”是在发生对应事件时所调用的函数。在能够使用事件处理函数之前，您必须先使用Sys.EventHandlerList.addHandler语句，创建该事件处理函数与事件之间的关联。当事件被引发时，它会自动调用一个或多个事件处理函数来执行特定的操作，之后的范例会有完整的说明，请大家稍安勿躁。
既然ASP.NET AJAX赋予JavaScript完整的面向对象功能，就不能不提到面向对象程序设计常用的“访问修饰符”（Access Modifiers）概念。所谓的访问修饰符，指的就是用来决定类或成员在何种情况下能够被访问的关键词。由于程序外部、命名空间的内部类、或是特定的程序代码区块都有各自不同的访问条件，所以Visual Basic与 C# 都有独立的关键词来作为访问修饰符，但是ASP.NET AJAX并没有访问修饰符的设计。然而，ASP.NET AJAX允许一个习惯性的用法，那就是如果类成员的名称以下划线（_）开头，则该成员会被认为是私有（Private）的，不允许从成员所属类的外部来访问它。
了解了命名空间与类之后，接下来我们要继续说明如何实现命名空间与类，并通过实现演练让各位了解如何制作完整的JavaScript类。
一般来说，ASP.NET AJAX客户端类所拥有的基本组件（Base components）、扩展类的行为（Behaviors）与控件类，都使用JavaScript的Prototype model与JSON notation语法来定义。一般来说，欲创建一个JavaScript类，必须依序执行下列四个步骤。
1. 创建命名空间
由Global命名空间的Type类来加以注册的对象会拥有面向对象功能，所以首要步骤就是调用Type类的registerNamespace方法来创建类所属的命名空间，以便让命名空间中的成员都能拥有面向对象特性。
registerNamespace方法的语法如下所示：
Type.registerNamespace(namespacePath);
|
语法中的参数namespacePath是一个文本字符串，代表所要注册的命名空间的名称，此名称可以使用大写（A到Z）、小写（a到z）的英文字母、或者是0到9的整数来命名。例如，如果要创建一个名称为Samples的命名空间，请编写如下所示的程序代码：
Type.registerNamespace("Samples");
|
2. 在命名空间中创建类并指定其构造函数
如同 .NET Framework 的类一样，JavaScript类一样需要构造函数。创建构造函数的语法非常简单，例如，如果要在Samples命名空间中创建SimpleComponent类的构造函数，请编写如下所示的程序代码：
/*公有构造函数。*/
Samples.SimpleComponent = function(V1, V2)
{
} |
特别要说明的是，V1与V2代表构造函数的参数，表示创建Samples.SimpleComponent类的实例时，需要传递两个参数给构造函数，此概念与 .NET Framework 完全相同。
3. 定义类
接下来，请于JavaScript的Prototype程序代码区块中定义类延伸扩展的内容。请于Prototype程序代码区块中内含所有Public与Private方法的定义，包括属性访问符方法与事件在内。
在Prototype程序代码区块中定义字段会比在构造函数中定义字段获得较佳的效率，然而，并不是所有的类型都适合在Prototype程序代码区块中定义。例如，Array与Object类型就必须定义在构造函数中，如此一来，对每一个实例来说它们才是唯一的，而不是被所有的实例存取。此举可避免您预期只更新某一个实例的组件属性，但是却更新了所有实例的属性值。
注意：请使用this指针来引用Prototype程序代码区块中的成员，this指针拥有性能优势，因为工作集合会使用较少的内存。
以JSON notation规范来说，所有的Prototype程序代码区块成员都是以逗号（,）分隔，最后一个Prototype程序代码区块成员之后不需要再加上逗号。以下面的程序代码而言，表示为Samples.SimpleComponent类定义Aprop属性与DoSomething方法：
Samples.SimpleComponent.prototype = { // 定义访问符。 set_Aprop: function(aNumber) { this._aProp = aNumber; }, get_Aprop: function() { return this._aProp; }, // 定义方法。 DoSomething: function() { alert('已经调用DoSomething方法！'); } } // Prototype定义结束。
|
请特别注意属性之间以及属性与方法之间皆使用逗号作分隔，同时Prototype区块的最后一个成员（也就是DoSomething方法）之后并未添加逗号，这完全符合JSON notation的请求。
4. 注册类并指定所要继承的类与所要实现的接口
到目前为止，类与命名空间还是两个独立的个体，必须通过Global命名空间的Type类的registerClass方法将类添加到命名空间中，才能让类与命名空间产生从属关系。请直接调用类的registerClass方法来注册类，语法如下所示：
classInstanceVar.registerClass(typeName, baseType, interfaceTypes);
|
语法中的classInstanceVar参数代表类，typeName参数代表类的完整名称，baseType参数代表所要继承的类，interfaceTypes参数代表所要实现的接口。
例如，如果您要注册Samples命名空间的SimpleComponent类，而且该类既不继承任何类，也不实现任何接口，请执行以下的语句：
Samples.SimpleComponent.registerClass('Samples.SimpleComponent', null, null);
|
注意：所要实现的接口必须先使用Type.registerInterface方法来注册。
举例来说，一个完整的AJAX JavaScript类定义应如下所示：
// 创建命名空间。
Type.registerNamespace("Samples");
// 于命名空间中创建类，并指定其构造函数。
Samples.SimpleComponent = function(V1, V2)
{
...
}
// 定义类。
Samples.SimpleComponent.prototype =
{
// 定义访问符。
set_Aprop: function(aNumber)
{
this._aProp = aNumber;
},
get_Aprop: function()
{
return this._aProp;
},
// 定义方法。
DoSomething: function()
{
alert('已经调用DoSomething方法！');
}
}// Prototype定义结束。
// 注册类并指定所要继承的类与所要实现的接口。
Samples.SimpleComponent.registerClass('Samples.SimpleComponent', null, null); |
实现演练
在以下的步骤中，我们将创建一个JavaScript类来代表一个棒球队，并为此类定义属性及方法。最后，您将实际创建ASP.NET AJAX页面来示范如何使用JavaScript类对象：
1）将您的ASP.NET AJAX网站打开在Visual Studio 2005的集成开发环境中。
2）从“网站”菜单中选择“添加新项”命令。
3）选择“Jscript文件”项目，接着在“名称”文本框中输入JavaScript的文件名称。以本例而言，请输入AdultGroup.js，然后单击“添加”按钮。
4）创建JavaScript类的第一个步骤就是创建命名空间，以本范例而言，请创建AdultGroup命名空间，如下所示：
Type.registerNamespace("AdultGroup"); |
5）请继续编写下列程序代码，以便在AdultGroup命名空间中创建一个BaseballTeam类，并且一并指定其公有构造函数。类构造函数的名称是类所属的命名空间加上类名：
/*公有构造函数。*/ AdultGroup.BaseballTeam = function(Nm, St)
{ } |
6）在类构造函数中为BaseballTeam类添加两个私有字段，以便用来持有传递给构造函数的参数值。建议把构造函数中的私有变量当成类字段，使用this指针来声明，以习惯性的用法来说，私有变量的命名将以下划线作开头：
this._Name = Nm; this._Stadium = St; |
完整的构造函数内容列示如下：
// 类公有构造函数。
AdultGroup.BaseballTeam = function(Nm, St)
{
this._Name = Nm;
this._Stadium = St;
} |
7）现在，请编写类的Prototype程序代码区块，以便为BaseballTeam类添加两个具备初始值的全局变量：
AdultGroup.BaseballTeam.prototype =
{ // 声明变量。 Wins : 0,
Defeats : 0
} |
8）请继续在Prototype程序代码区块中编写下列程序代码，以便为BaseballTeam类添加Name与Stadium属性：
// 声明属性。
get_Name : function()
{
return this._Name;
},
get_Stadium : function()
{
return this._Stadium;
},
|
9）请继续在Prototype程序代码区块中编写下列程序代码，以便为BaseballTeam类定义一个名称为Record的属性，请特别注意我们是如何利用this指针访问全局变量的：
get_Record : function() { var played = this.Wins + this.Defeats;
return (this.Wins/played);
},
|
Record属性会返回棒球队的胜率。例如，如果王建民的洋基队过去赢了十场比赛也输了十场比赛，则其胜率（亦即Record属性的值）将是0.5。
10）请继续在Prototype程序代码区块中编写下列程序代码，以便为BaseballTeam类添加一个公有方法PlayGame：“
PlayGame : function(RunsFor, RunsAgainst)
{ if(RunsFor > RunsAgainst)
{
this.Wins += 1;
} else
{
this.Defeats += 1;
}
}, |
11）请继续在Prototype程序代码区块中编写下列程序代码，以便为BaseballTeam类添加另一个公有方法PlayGame2，此方法会以更简单的方式表达比赛的胜负：
PlayGame2 : function(Res)
{ if(Res == 'Win')
{ this.Wins += 1;
}
else
{
this.Defeats += 1;
}
}, |
注意：在此要提醒大家，ASP.NET AJAX所扩展的JavaScript并没有支持函数重载（Function overloading）功能，如果在同一个类定义了多个相同名称的函数，则调用函数时将会调用最后一个在Prototype程序代码区块中出现的同名函数。
12）请继续在Prototype程序代码区块中编写下列程序代码，以便为BaseballTeam类添加一个ToString方法，它会以字符串的形式返回结果：
toString : function()
{
return this.get_Name() + ", 比赛场地 " + this.get_Stadium() +
"：" + "赢" + this.Wins + "输" + this.Defeats;
} |
13）如下所示，请使用registerClass方法来注册BaseballTeam类：
AdultGroup.BaseballTeam.registerClass('AdultGroup.BaseballTeam', null, null);
|
上述程序代码代表我们将在AdultGroup命名空间中创建一个BaseballTeam类，同时此类将不继承任何类也不实现任何接口。
14）最后，为了让ScriptManager控件能够正确处理Script文档，每一个Script文档必须在结尾处调用Sys.Application.notify ScriptLoaded方法，以便通知应用程序已经完成Script文档的加载操作，如下所示：
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); |
至此，我们已经完成BaseballTeam类的定义工作。BaseballTeam类的完整程序代码附于CH10项目中的AdultGroup.js中，请自行参考之，在此不再列出。
15）接下来要示范如何在页面中使用BaseballTeam类。其实后续步骤所要创建的页面CH10_DemoForm001.aspx已附于CH10项目中，然而为了让大家清楚了解如何在一个页面中使用JavaScript类，我们特别从头到尾说明其创建步骤。
现在，请确认已在Visual Studio 2005的集成开发环境的“解决方案资源管理器”中选择网站的根节点，然后从“网站”菜单中选择“添加新项”命令。
16）“添加新项”对话框打开后，在“模板”区域中选择Web Form，接着在“名称”文本框中输入页面的文件名称。以本例而言，请输入CH10_DemoForm001.aspx，然后单击“添加”按钮。
17）一个ASP.NET AJAX页面一定要拥有而且也只能拥有一个ScriptManager控件，因此请您从工具箱中，将ScriptManager控件拖放至页面上，此举将启用ASP.NET AJAX对于JavaScript的扩展性支持。
18）接下来，请添加对JavaScript文档的引用，如下所示：
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/Js/AdultGroup.js" /> </Scripts> </asp:ScriptManager> |
其实，ASP.NET AJAX为了响应不同情况的需求，能够动态改变Script文档的引用，有关改变引用的方法与技巧在稍后的章节将有完整的说明。
19）请为页面添加TextArea控件与Html按钮控件，并将按钮控件的value属性设定为“显示比赛结果”。
20）如下所示，请在页面的 <head> 标签组内，添加JavaScript程序代码区块的声明命令：
<script type="text/javascript" language="javascript"> </script> |
21）请在JavaScript程序代码区块内的onclick事件处理函数中编写下列程序代码，以便使用new运算符来创建一个BaseballTeam对象，并将对象引用符给局部变量sf：
function Button1_onclick() { var sf = new AdultGroup.BaseballTeam('纽约洋基队', 'Yankee Stadium'); ... } |
从上述程序代码可以发现，创建ASP.NET AJAX 客户端类（JavaScript类）实例的方式类似于 .NET Framework 的作法。
22）请继续在JavaScript程序代码区块内的onclick事件处理函数中，编写下列程序代码来调用PlayGame与PlayGame2方法，以便产生比赛结果：
sf.PlayGame(7,2); sf.PlayGame2('Lose');
|
23）请继续在JavaScript程序代码区块内的onclick事件处理函数中编写下列程序代码，以便显示对象目前的状态：
$get('TextArea1').value = "胜率：" + sf.get_Record() + '\n'; $get('TextArea1').value += sf.toString();
|
至此，我们已经完成页面的设计工作，可以直接执行页面以便查看JavaScript的执行结果。
图10-1是页面范例CH10_DemoForm001.aspx的执行画面，它示范如何使用AdultGroup命 名空间与BaseballTeam类。
页面范例 - 示范如何使用命名空间与类
图10-2是页面范例CH10_DemoForm002.aspx的执行画面，其功能特性说明如下：
·在文本框中输入正确的姓氏、名字、电子邮件与起薪之后，按下“建立类对象”按钮将会创建类的实例。事实上，按钮所创建的对象即为Human.Person实例。
·按下“建立类对象”按钮之后，下方调整员工薪资区块的最上方字段会显示该名员工的信息。此外，除非在“加薪额度：”或“减薪额度：”文本框中输入文字，否则右侧的“计算”按钮将无法使用。
·如果在“加薪额度：”文本框所输入的数值超过员工目前起薪的百分之十，则会显示消息框提示用户该名员工调整后的起薪太高（如图10-3所示）。
·如果在“减薪额度：”文本框所输入的数值超过员工目前起薪的百分之十，则会在画面显示消息框提示用户该名员工调整后的起薪太低。
了解了页面范例CH10_DemoForm002.aspx的特色之后，我们来研究其设计技巧：
·如下所示，请在页面的 <head>...</head> 之间添加下面一段JavaScript程序代码：
<script language="javascript" type="text/javascript"> <!-- var newPerson; function pageLoad() { $get('Button2').disabled = true; } function Button1_onclick() { if($get('Text1').value == "") { alert("请输入姓氏。"); return false; } if($get('Text2').value == "") { alert("请输入名字。"); return false; } if($get('Text3').value == "") { alert("请输入电子邮件。"); return false; } if($get('Text4').value == "") { alert("请输入起薪。"); return false; } newPerson = new Human.Person( $get('Text2').value, $get('Text1').value, $get('Text3').value, $get('Text4'). value); $get('personInfo').innerText = newPerson.get_LastName() + "," + newPerson. get_FirstName() + '的起薪是：' + newPerson.salary; } function textKeyDown() { $get('Button2').disabled = false; } function textKeyUp() { if($get('Text5').value == "" && $get('Text6').value == "") { $get('Button2').disabled = true; } else { $get('Button2').disabled = false; } } function Button2_onclick() { if($get('Text5').value != "") { newPerson.plusPersonSalary($get('Text5').value); } if($get('Text6').value != "") { newPerson.minusPersonSalary($get('Text6').value); } $get('personSalary').innerText = newPerson.get_LastName() + "," + newPerson. get_FirstName() + '目前的薪资是：' + newPerson.salary; $get('personInfo').innerText = newPerson.get_LastName() + "," + newPerson. get_FirstName() + '的起薪是：' + newPerson.salary; $get('processResult').innerText = newPerson.sendMail(); } // --> </script> |
上面一段JavaScript程序代码的主要用途说明如下：
◇ pageLoad事件处理函数的程序代码会禁用“计算”按钮。
pageLoad事件也是其中一个客户端页面生命周期事件，一旦您在ASP.NET页面中添加一个ScriptManager控件，pageLoad事件就会自动附加至页面上。有关客户端页面生命周期事件的进一步说明，请参阅稍后的章节。
◇ 为“建立类对象”按钮的Click事件编写事件处理函数Button1_onclick，该函数会判断用户是否输入了姓氏、名字、电子邮件与起薪，如果是的话，则将输入内容当作参数传递给Human.Person类的构造�
