Microsoft AJAX Library中的面向对象简单介绍

这里只对Microsoft AJAX Library中的面向对象作简单介绍,包括如何定义类、成员、方法、接口、枚举等

如何定义一个类呢？

定义一个类第一步要注册命名空间，那如何注册呢？非常简单，看如下代码：

Type.registerNamespace("Mynamespace");

定义类是通过构造函数实现，看如下代码：

//注册类
Mynamespace.Employee = function(name) //定义一个类通过构造函数实现
{
    this._name = name;
    this._year = 0;
}

如何定义类的成员呢？

定义成员通过类的prototype来实现，看如下代码：

//定义成员通过prototype
Mynamespace.Employee.prototype=  //这里不能写成=fuction()
{
    //同JSON比较=> { name : "jsky",sex : "女" }
    
    get_name : function() //不是function,括弧不能漏哦
    {
        return this._name;
    },
    get_year : function()
    {
        return this._year;
    },
    set_name : function(value)
    {
        this._name=value;
    },
    set_year : function(value)
    {
        this._year=value;
    },
    calculateSalary : function()
    {
        return 1000 * (this._year);
    },
    getDescription : function()
    {
        return String.format(
        "{0} gets {1} yuan per month.",
        this._name, //this关键字不能省
        this.calculateSalary());  //this关键字不能省
    }
}

分别定义了2个属性和2个方法，属性通过get_或set_进行定义，参照如上所示。

最后一步是注册这个类，看如下所示：

Mynamespace.Employee.registerClass("Mynamespace.Employee");

如何定义抽象类呢？

我们这么理解包含抽象方法的类视为抽象类，我们对calculateSalary做如下更改：

calculateSalary : function()
{
    //定义抽象类，就是在函数内抛出异常
    throw Error.notImplemented(); 
}

这样Employee就成为了一个抽象类。

如何定义子类呢？

要定义一个类的子类，需要注意以下几个方面

1、实现父类的构造函数和抽象方法

2、注册类时带上父类的名

下面我们定义一个Employee的子类Intern，看看子类如何实现父类的构造函数以及如何调用父类的方法。

//定义子类--Intern
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);

如何定义一个接口呢？

下面我们定义一个Employee的接口IEmployee，看如下代码：

/**************************** IEmployee 接口 ****************/
//定义一个接口IEmployee
Mynamespace.IEmployee = function()
{
    throw Error.notImplemented();
}
Mynamespace.IEmployee.prototype=
{
    calculateSalary : function()
    {
        throw Error.notImplemented();
    } 
}
Mynamespace.IEmployee.registerInterface("Mynamespace.IEmployee");

注意注册时是注册接口而不是类，即registerInterface。

如何定义一个枚举呢？

下面我们来定义一个有关Employee的枚举，看如下代码所示：

/**************************** 枚举 **********************/
//定义一个枚举
Mynamespace.EmployeeType = function()
{
    throw Error.notImplemented();
}
Mynamespace.EmployeeType.prototype = 
{
    Intern : 0,
    Vendor : 1,
    FulltimeEmployee : 2
}
Mynamespace.EmployeeType.registerEnum("Mynamespace.EmployeeType");

注意最后注册的是枚举而不是类，别弄错了。

好了，下面我们看一个完整的例子，新建一个Js文件，取名Employee.js

Type.registerNamespace("Mynamespace");

/**************************** 枚举 **************************************/
Mynamespace.EmployeeType = function()
{
    throw Error.notImplemented();
}
Mynamespace.EmployeeType.prototype = 
{
    Intern : 0,
    Vendor : 1,
    FulltimeEmployee : 2
}
Mynamespace.EmployeeType.registerEnum("Mynamespace.EmployeeType");

/**************************** IEmployee 接口 *******************************/
Mynamespace.IEmployee = function()
{
    throw Error.notImplemented();
}
Mynamespace.IEmployee.prototype=
{
    calculateSalary : function()
    {
        throw Error.notImplemented();
    },
    //因为要测试枚举，我们在这里多加一个
    get_type : function()
    {
        throw Error.notImplemented();
    }
}
Mynamespace.IEmployee.registerInterface("Mynamespace.IEmployee");

/************************** 抽象类 Employee *********************************/
//注册类
Mynamespace.Employee = function(name) //定义一个类通过构造函数实现
{
    this._name = name;
    this._year = 0;
}

//定义成员通过prototype
Mynamespace.Employee.prototype=  //这里不能写成=fuction()
{
    //同JSON比较=> { name : "jsky",sex : "女" }
    
    get_name : function() //不是function,括弧不能漏哦
    {
        return this._name;
    },
    get_year : function()
    {
        return this._year;
    },
    set_name : function(value)
    {
        this._name=value;
    },
    set_year : function(value)
    {
        this._year=value;
    },
    calculateSalary : function()
    {
        //return 1000*(this._year);
        throw Error.notImplemented(); //定义抽象类，就是在函数内抛出异常，使之变成抽象函数
    },
    getDescription : function()
    {
        return String.format(
        "{0} gets {1} yuan per month.",
        this._name, //this关键字不能省
        this.calculateSalary());  //this关键字不能省
    }
}
//最后注册这个类，这一步不能省！
//Mynamespace.Employee.registerClass("Mynamespace.Employee");
//因为要实现接口IEmployee,所以注册Employee要这么写
Mynamespace.Employee.registerClass("Mynamespace.Employee",null,Mynamespace.IEmployee); //null表示是否有父类

/**************************** 子类 Intern **********************************/

//定义子类--Intern
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!";
    },
    //因为接口IEmployee里有get_type(),所以这里要实现
    get_type : function()
    {
        return Mynamespace.EmployeeType.Intern;
    }
}
Mynamespace.Intern.registerClass("Mynamespace.Intern",Mynamespace.Employee);

/**************************** 子类 Vendor **********************************/

//定义Vendor
Mynamespace.Vendor=function(name)
{
    //子类一定要实现父类的构造函数
    Mynamespace.Vendor.initializeBase(this,[name]);
}
Mynamespace.Vendor.prototype=
{
    //子类一定要实现父类的抽象函数
    calculateSalary : function()
    {
        return 5000 + 1000 * (this.get_year() - 1);
    },
     //因为接口IEmployee里有get_type(),所以这里要实现
    get_type : function()
    {
        return Mynamespace.EmployeeType.Vendor;
    }
}
Mynamespace.Vendor.registerClass("Mynamespace.Vendor",Mynamespace.Employee);

/************************* 子类 FulltimeEmployee ****************************/

//定义FulltimeEmployee
Mynamespace.FulltimeEmployee=function(name)
{
    Mynamespace.FulltimeEmployee.initializeBase(this,[name]);
}
Mynamespace.FulltimeEmployee.prototype=
{
    calculateSalary : function()
    {
        return 15000 + 2000 * (this.get_year() - 1);
    },
    getDescription : function()
    {
        var description = Mynamespace.FulltimeEmployee.callBaseMethod(this,"getDescription");
        return description + "what a excellent FulltimeEmployee!";
    },
     //因为接口IEmployee里有get_type(),所以这里要实现
    get_type : function()
    {
        return Mynamespace.EmployeeType.FulltimeEmployee;
    }
}
Mynamespace.FulltimeEmployee.registerClass("Mynamespace.FulltimeEmployee",Mynamespace.Employee);

/**************************** 带标记的枚举 ***********************************/

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); //true表示是否加标注

// Item1 + Item3
// Item1 | Item3 (preferred)

再看页面是如何使用的

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
            <Scripts>
                <asp:ScriptReference Path="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 gsky = new Mynamespace.Intern("gsky");
        gsky.set_year(3);
        display(gsky.getDescription());
        
        var tom = new Mynamespace.Vendor("tom");
        tom.set_year(3);
        display(tom.getDescription());
        
        var jerry = new Mynamespace.FulltimeEmployee("jerry");
        jerry.set_year(3);
        display(jerry.getDescription());
        
        display("gsky implements 'IEmployee' interface : " + 
        Mynamespace.IEmployee.isImplementedBy(gsky));
        
        display(String.format("{0} is a {1}",tom.get_name(),tom.get_type()));
        
        var type=Mynamespace.EmployeeType.toString(tom.get_type());
        display(String.format("{0} is a {1}",tom.get_name(),type));
        
        var all=Mynamespace.MyFlags.All;
        display(Mynamespace.MyFlags.toString(all)); // All
        
        display(Mynamespace.MyFlags.parse("Item1,Item3"));  //5
        
        </script>

 

显示结果如下所示:

gsky gets 2000 yuan per month.what a poor intern!
tom gets 7000 yuan per month.
jerry gets 19000 yuan per month.what a excellent FulltimeEmployee!
gsky implements 'IEmployee' interface : true
tom is a 1
tom is a Vendor
All
5

 

以上某些地方没做过多的细说，请对照以上代码参考相关资料，这里只做简单介绍。

以上代码注解若有不妥之处敬请指出！

谢谢拜读 :)

happy coding

happy everyday