如果我们可以合理的使用面向对象编程,我们可以提高代码的复用性和可维护性,这里强调的是合理的使用,有了面向对象类型系统,就可以使用一些成熟的设计方式
创建一个js文件
我们可以在js文件一开始,写上/// <reference name="MicrosoftAjax.js" />这样一段代码,就可以在VS里得到很多关于Microsoft AJAX Library的代码提示
/// <reference name="MicrosoftAjax.js" />
Type.registerNamespace("MyNamespace");//注册一个命名空间
MyNamespace.Employee = function(name) {//定义一个构造函数
this._name = name ? name : "Anonymous";//初始化域变量
this._year = 0; //初始化域变量
}
MyNamespace.Employee.prototype =//定义类成员
{
get_name: function() {//定义属性
return this._name;
},//注意都是用逗号分割的
get_year: function() {//定义属性
return this._year;
},
set_year: function(value) {//定义属性
this._year = value;
},
calculateSalary: function() {//定义一个方法
return this._year * 1000;
// throw Error.notImplemented();
},
getDescription: function() {//定义一个方法
return String.format("{0} gets {1} yuan per month", this._name, this.calculateSalary());
}
}
MyNamespace.Employee.registerClass("MyNamespace.Employee"); //注册类
这样,我们就定义了一个简单的Employee类
创建一个aspx页面,并使用我们定义好的Employee类
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Demo05/Employee.js" />
</Scripts>
</asp:ScriptManager>
<div id="info">
</div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML+=text+"<br/>";
}
var xiaoyaojian = new MyNamespace.Employee("xiaoyaojian");
xiaoyaojian.set_year(4);
display(xiaoyaojian.getDescription());
</script>
</form>
</body>
</html>
调试,出结果,用法很简单,和c#类相同
修改上面的Employee.js
/// <reference name="MicrosoftAjax.js" />
Type.registerNamespace("MyNamespace");//注册一个命名空间
MyNamespace.Employee = function(name) {//定义一个构造函数
this._name = name ? name : "Anonymous";//初始化域变量
this._year = 0; //初始化域变量
}
MyNamespace.Employee.prototype =//定义类成员
{
get_name: function() {//定义属性
return this._name;
},//注意都是用逗号分割的
get_year: function() {//定义属性
return this._year;
},
set_year: function(value) {//定义属性
this._year = value;
},
calculateSalary: function() {//定义一个方法
//return this._year * 1000;
throw Error.notImplemented();//抛出异常,这个方法是抽象方法,说明这个类是抽象类
},
getDescription: function() {//定义一个方法
return String.format("{0} gets {1} yuan per month", this._name, this.calculateSalary());
}
}
MyNamespace.Employee.registerClass("MyNamespace.Employee"); //注册类
//MyNamespace.Employee.registerClass("MyNamespace.Employee", null, MyNamespace.IEmployee);//注册类
MyNamespace.Intern = function(name) {
MyNamespace.Intern.initializeBase(this, [name]);//调用父类构造函数
}
MyNamespace.Intern.prototype =
{
calculateSalary: function() {
return 2000;
},
getDescription: function() {
var description = MyNamespace.Intern.callBaseMethod(this, "getDescription");//调用父类方法
return description + ",What a poor intern!";
}
}
MyNamespace.Intern.registerClass("MyNamespace.Intern", MyNamespace.Employee); //注册这个类,继承MyNamespace.Employee
MyNamespace.Vendor = function(name) {
MyNamespace.Vendor.initializeBase(this, [name]);
}
MyNamespace.Vendor.prototype =
{
calculateSalary: function() {
//return 2000;
return 5000 + 1000 * (this.get_year() - 1);
}
}
MyNamespace.Vendor.registerClass("MyNamespace.Vendor", MyNamespace.Employee);
MyNamespace.FulltimeEmployee = function(name) {
MyNamespace.FulltimeEmployee.initializeBase(this, [name]);
}
MyNamespace.FulltimeEmployee.prototype =
{
calculateSalary: function() {
//return 2000;
return 15000 + 2000 * (this.get_year());
}
}
MyNamespace.FulltimeEmployee.registerClass("MyNamespace.FulltimeEmployee", MyNamespace.Employee);
这时,我们再打开刚才的页面,就会出现一个方法未实现错误,因为我们实例化一个抽象类,这不符合逻辑
修改页面代码
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML+=text+"<br/>";
}
var xiaoyaojian = new MyNamespace.Intern("Xiaoyaojian");
xiaoyaojian.set_year(3);
display(xiaoyaojian.getDescription());
var xiaobai = new MyNamespace.Vendor("Xiaobai");
xiaobai.set_year(3);
display(xiaobai.getDescription());
var xiaobaigege = new MyNamespace.FulltimeEmployee("Xiaobaigege");
xiaobaigege.set_year(5);
display(xiaobaigege.getDescription());
</script>
这样,成功的使用了我们创建了继承Employee的三个类
同样,还是修改Employee.js文件
/// <reference name="MicrosoftAjax.js" />
Type.registerNamespace("MyNamespace"); //注册一个命名空间
MyNamespace.IEmployee = function() {
throw Error.notImplemented();
}
MyNamespace.IEmployee.prototype = {
calcaulateSalary: function() {
throw Error.notImplemented();
}
}
MyNamespace.IEmployee.registerInterface("MyNamespace.IEmployee");
MyNamespace.Employee = function(name) {//定义一个构造函数
this._name = name ? name : "Anonymous";//初始化域变量
this._year = 0; //初始化域变量
}
MyNamespace.Employee.prototype =//定义类成员
{
get_name: function() {//定义属性
return this._name;
},//注意都是用逗号分割的
get_year: function() {//定义属性
return this._year;
},
set_year: function(value) {//定义属性
this._year = value;
},
calculateSalary: function() {//定义一个方法
//return this._year * 1000;
throw Error.notImplemented();//抛出异常,这个方法是抽象方法,说明这个类是抽象类
},
getDescription: function() {//定义一个方法
return String.format("{0} gets {1} yuan per month", this._name, this.calculateSalary());
}
}
//MyNamespace.Employee.registerClass("MyNamespace.Employee"); //注册类
MyNamespace.Employee.registerClass("MyNamespace.Employee", null, MyNamespace.IEmployee);//注册类
MyNamespace.Intern = function(name) {
MyNamespace.Intern.initializeBase(this, [name]);//调用父类构造函数
}
MyNamespace.Intern.prototype =
{
calculateSalary: function() {
return 2000;
},
getDescription: function() {
var description = MyNamespace.Intern.callBaseMethod(this, "getDescription");
return description + ",What a poor intern!";
}
}
MyNamespace.Intern.registerClass("MyNamespace.Intern", MyNamespace.Employee); //注册这个类,继承MyNamespace.Employee
MyNamespace.Vendor = function(name) {
MyNamespace.Vendor.initializeBase(this, [name]);
}
MyNamespace.Vendor.prototype =
{
calculateSalary: function() {
//return 2000;
return 5000 + 1000 * (this.get_year() - 1);
}
}
MyNamespace.Vendor.registerClass("MyNamespace.Vendor", MyNamespace.Employee);
MyNamespace.FulltimeEmployee = function(name) {
MyNamespace.FulltimeEmployee.initializeBase(this, [name]);
}
MyNamespace.FulltimeEmployee.prototype =
{
calculateSalary: function() {
//return 2000;
return 15000 + 2000 * (this.get_year());
}
}
MyNamespace.FulltimeEmployee.registerClass("MyNamespace.FulltimeEmployee", MyNamespace.Employee);
这时,在页面中还使用这些类还是没有问题的,如果我们要体现这个接口的继承,可以在页面<script>中添加如下代码
display("Xiaoyaojian implements 'IEmployee' interface:" + MyNamespace.IEmployee.isImplementedBy(xiaoyaojian))
za在页面中,我们可以看到返回的结果是true,说明Employee实现了接口IEmployee
MyNamespace.MyEnum=function(){throw Error.notImplemented();}
MyNamespace.MyEnum.prototoype={item1:1,item2:2,item3:4}
MyNamespace.MyEnum.registerEnum(“MyNamespace.MyEnum”,[true])//true表示是否定义一个标记
修改Employee.js
/// <reference name="MicrosoftAjax.js" />
Type.registerNamespace("MyNamespace"); //注册一个命名空间
MyNamespace.EmployeeType = function() {
throw Error.notImplemented();//抛出异常,无法实例化
}
MyNamespace.EmployeeType.prototype =//定义成员
{
Intern: 0,
Vendor: 1,
FulltiomEmployee: 2
}
MyNamespace.EmployeeType.registerEnum("MyNamespace.EmployeeType");//注册枚举
MyNamespace.IEmployee = function() {
throw Error.notImplemented();
}
MyNamespace.IEmployee.prototype = {
calcaulateSalary: function() {
throw Error.notImplemented();
},
get_type: function() {
throw Error.notImplemented();
}
}
MyNamespace.IEmployee.registerInterface("MyNamespace.IEmployee");
MyNamespace.Employee = function(name) {//定义一个构造函数
this._name = name ? name : "Anonymous";//初始化域变量
this._year = 0; //初始化域变量
}
MyNamespace.Employee.prototype =//定义类成员
{
get_name: function() {//定义属性
return this._name;
},//注意都是用逗号分割的
get_year: function() {//定义属性
return this._year;
},
set_year: function(value) {//定义属性
this._year = value;
},
calculateSalary: function() {//定义一个方法
//return this._year * 1000;
throw Error.notImplemented();//抛出异常,这个方法是抽象方法,说明这个类是抽象类
},
getDescription: function() {//定义一个方法
return String.format("{0} gets {1} yuan per month", this._name, this.calculateSalary());
}
}
//MyNamespace.Employee.registerClass("MyNamespace.Employee"); //注册类
MyNamespace.Employee.registerClass("MyNamespace.Employee", null, MyNamespace.IEmployee);//注册类
MyNamespace.Intern = function(name) {
MyNamespace.Intern.initializeBase(this, [name]);//调用父类构造函数
}
MyNamespace.Intern.prototype =
{
calculateSalary: function() {
return 2000;
},
getDescription: function() {
var description = MyNamespace.Intern.callBaseMethod(this, "getDescription");
return description + ",What a poor intern!";
},
get_type: function() {
return MyNamespace.EmployeeType.Intern;
}
}
MyNamespace.Intern.registerClass("MyNamespace.Intern", MyNamespace.Employee); //注册这个类,继承MyNamespace.Employee
MyNamespace.Vendor = function(name) {
MyNamespace.Vendor.initializeBase(this, [name]);
}
MyNamespace.Vendor.prototype =
{
calculateSalary: function() {
//return 2000;
return 5000 + 1000 * (this.get_year() - 1);
},
get_type: function() {
return MyNamespace.EmployeeType.Vendor;
}
}
MyNamespace.Vendor.registerClass("MyNamespace.Vendor", MyNamespace.Employee);
MyNamespace.FulltimeEmployee = function(name) {
MyNamespace.FulltimeEmployee.initializeBase(this, [name]);
}
MyNamespace.FulltimeEmployee.prototype =
{
calculateSalary: function() {
//return 2000;
return 15000 + 2000 * (this.get_year());
},
get_type: function() {
return MyNamespace.EmployeeType.FulltimeEmployee;
}
}
MyNamespace.FulltimeEmployee.registerClass("MyNamespace.FulltimeEmployee", MyNamespace.Employee);
这时,在页面中<script>中添加如下代码
var type = MyNamespace.EmployeeType.toString(xiaoyaojian.get_type());
display(String.format("{0} is a {1}", xiaoyaojian.get_name(), type));
刷新页面,出现效果,如果我们不使用MyNamespace.EmployeeType.toString(),这里就会出现一个“1”,符合我们的定义
定义个作为标记的枚举类
在Employee.js里添加如下内容
MyNamespace.MyFlags = function() {
throw Error.notImplemented();
}
MyNamespace.MyFlags.prototype =
{
Item1:1,
Item2:2,
Item3:4,
None:0,
All:7
}
MyNamespace.MyFlags.registerEnum("MyNamespace.MyFlags",true);
在页面中我们可以这样使用
var all = MyNamespace.MyFlags.All;
display(all);
display(MyNamespace.MyFlags.toString(all));
display(MyNamespace.MyFlags.parse("Item1,Item3")); //"Item1,Item3"这是一个标准的表示方法,结果为Item1+Item3的结果
后面这几个,我就不多做解释啦
到此讲完
今天是小白的生日,纪念一下