對於AJAX 來說，不編寫 JavaScript 代碼即可實現很好的 AJAX 頁面幾乎是不可能的，
當然咯，你可以使用 AJAX Extensions 中的 Updatepanel 來實現一些基本的 AJAX 功能，
但是如果想比較好的掌握 AJAX ，那麼在用戶端進行 JavaScript 的編寫時無法避免的，
在 ASP.NET AJAX 中，Microsoft 對 JavaScript 進行了很好的 OOP 擴充，
使之實現了基本的 OOP 功能，比如命名空間，類,繼承，介面，反射等等OOP功能均有擴充，
所以在開發上，相比以前繁瑣的 JavaScript ，又有了更近一步的改進了。
接下來看的一個樣本呢，就是使用了 Microsoft AJAX Library 對 JavaScript 的基本 OOP 功能，
其中主要包括了命名空間的使用，類的使用，繼承的實現以及介面的一些最基本的用法。
在頁面的 Code-Behind 中沒有任何代碼，純粹在用戶端使用 JavaScript 實現，
由於比較簡單，所以直接看代碼吧，注釋也很豐富的
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
//要使用 JavaScript 的 OOP 擴充功能，頁面上必須有一個 ScriptManager
//這個 ScriptManager 負責下載 MicroSoft AJAX Library 的基本 JavaScript 庫
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
//最開始是使用 Global 命名空間下的 Type 來定義自己的命名空間
Type.registerNamespace("BaoBeiMe");
//然後便可以在這個命名空間中定義自己的類了
//類的建構函式
BaoBeiMe.Person = function(name, sex, age) {
this._name = name;
this._sex = sex;
this._age = age;
}
//類的類體部分
BaoBeiMe.Person.prototype = {
set_sex: function(sex) {
this._sex = sex;
},
get_sex: function() {
return this._sex;
},
set_name: function(name) {
this._name = name;
},
get_name: function() {
return this._name;
},
set_age: function(age) {
this._age = age;
},
get_age: function() {
return this._age;
},
toString: function() {
return String.format("我是 {0} ,性別為 {1} ,今年 {2} 歲了!",
this.get_name(), this.get_sex(), this.get_age());
}
}
//實現自訂命名空間和自訂類的關聯
//這個類並沒有繼承自任何類，也未實現任何介面
BaoBeiMe.Person.registerClass("BaoBeiMe.Person", null, null);
//再註冊一個介面 BaoBeiMe.MyInterface
BaoBeiMe.MyInterface = function() {
}
BaoBeiMe.MyInterface.prototype = {
//擷取姓名,性別,年齡
IGetPersonMsg: function() { },
//擷取職工號,部門,工資
IGetEmployeeMsg: function() { }
}
BaoBeiMe.MyInterface.registerInterface("BaoBeiMe.MyInterface");
//再註冊一個類，使之繼承自 BaoBeiMe.Person 類，
//並且將會實現上面定義的 BaoBeiMe.MyInterface 介面
BaoBeiMe.Employee = function(name, sex, age, number, department, money) {
//調用父類的建構函式來初始化父類的基本結構
BaoBeiMe.Employee.initializeBase(this, [name, sex, age]);
this._number = number;
this._department = department;
this._money = money;
}
BaoBeiMe.Employee.prototype = {
set_number: function(number) {
this._number = number;
},
get_number: function() {
return this._number;
},
set_department: function(department) {
this._department = department;
},
get_department: function() {
return this._department;
},
set_money: function(money) {
this._money = money;
},
get_money: function() {
return this._money;
},
//由於在父類中也存在了 toString() 方法，所以此處實質上為一種覆蓋
//並且也通過 callBaseMethod 調用了父類的 toString(）
toString: function() {
return String.format("{0} , 職工號為 {1} ,在 {2} 工作 , 工資為 {3} !",
BaoBeiMe.Employee.callBaseMethod(this, "toString"),
this.get_number(), this.get_department(), this.get_money());
},
//這裡則是要求實現介面中的兩個方法
IGetPersonMsg: function() {
return String.format("我是 {0} , 性別為 {1} , 今年 {2} 歲了 !",
this.get_name(), this.get_sex(), this.get_age());
},
IGetEmployeeMsg: function() {
return String.format("我的職工號為 {0} , 在 {1} 工作 , 工資為 {2} 元!",
this.get_number(), this.get_department(), this.get_money());
}
}
//註冊類時，指明父類為 BaoBeiMe.Person ， 實現了介面 BaoBeiMe.MyInterface
BaoBeiMe.Employee.registerClass("BaoBeiMe.Employee",
BaoBeiMe.Person, BaoBeiMe.MyInterface);
var person;
var employee;
function Button1_onclick() {
person = new BaoBeiMe.Person("XiaoZhen", "男", "20");
alert(person.toString());
}
function Button2_onclick() {
if (person) {
person.set_age("21");
person.set_name("Bill");
alert(person.toString());
}
else {
alert("尚未建立 Person 對象");
}
}
function Button3_onclick() {
employee = new BaoBeiMe.Employee("XiaoZhen", "男", "20",
"10093323", "研發部", "15000");
alert(employee.toString());
}
function Button4_onclick() {
if (employee) {
employee.set_name("Bill");
employee.set_age("21");
employee.set_money("20000");
alert(employee.toString());
}
else {
alert("尚未建立 Employee 對象");
}
}
function Button5_onclick() {
if (employee) {
alert(employee.IGetPersonMsg());
}
else {
alert("尚未建立 Employee 對象");
}
}
function Button6_onclick() {
if (employee) {
alert(employee.IGetEmployeeMsg());
}
else {
alert("尚未建立 Employee 對象");
}
}
</script>
<div>
<input id="Button1" type="button" value="建立 Person 對象"
onclick="return Button1_onclick()" /><br />
<br />
<input id="Button2" type="button" value="更改 Person 資訊"
onclick="return Button2_onclick()" /><br />
<br />
<input id="Button3" type="button" value="建立 Employee 對象"
onclick="return Button3_onclick()" /><br />
<br />
<input id="Button4" type="button" value="更改 Employee 資訊"
onclick="return Button4_onclick()" /><br />
<br />
<input id="Button5" type="button" value="通過介面擷取基本資料"
onclick="return Button5_onclick()" /><br />
<br />
<input id="Button6" type="button" value="通過介面擷取工作資訊"
onclick="return Button6_onclick()" /></div>
</form>
</body>
</html>
結果
單擊 ”建立 Person 對象“ 按鈕就可得到
單擊 “更改 Person 對象” 即可得到
單擊 “建立 Employee 對象” 即可得到
單擊 “更改 Employee 對象” 即可得到
單擊 “通過介面擷取基本資料” 即可得到
單擊 “通過介面擷取工作資訊” 即可得到
2010—1 –25
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
