使用MicrosoftAJAX实现Javascript面向对象（二）命名空间、类

命名空间、类

Microsoft AJAX Library 包括基类及其派生的对象和组件。通过所有这些类，您可以使用面向对象的编程模型来编写客户端脚本。

Microsoft AJAX Library 扩展为 JavaScript 添加了下列面向对象功能：

命名空间
类
继承
接口
枚举
反射

如果我们可以合理的使用面向对象编程，我们可以提高代码的复用性和可维护性，这里强调的是合理的使用，有了面向对象类型系统，就可以使用一些成熟的设计方式

Type 类

为 ECMAScript (JavaScript) 面向对象编程功能提供类型化和类型反射系统。

Type 类为 JavaScript 编程添加了命名空间、类和继承等面向对象的功能。任何使用 Type 类注册的 JavaScript 对象都会自动获得访问此功能的权限。

Type.registerNamespace( string );

成员

instanceVar.callBaseMethod(instance, name, baseArguments);	使用指定的参数调用基类方法。
public static function createCallback( method : Function, context : Object ) : Function	在给定要回调的函数以及要传递的参数时，创建一个回调方法。
public static function createDelegate( instance : Object, method : Function ) : Function	创建一个防止创建上下文的委托函数。上下文用于定义 this 关键字所指向的对象实例。
var methodRefVar = typeInstanceVar.getBaseMethod(instance, name);	从指定实例的基类返回某个方法的实现。
var typeVar = typeInstanceVar.getBaseType();	返回实例的基类型。
var a = typeVar.getInterfaces();	返回一个 Array 对象，该对象包含类型所实现的接口的列表。
var typeNameVar = typeInstanceVar.getName();	返回实例类型的名称。
var rootNamespacesVar = Type.getRootNamespaces();	返回一个 Array 对象，该对象包含对客户端应用程序的所有根命名空间的引用。
var implementsVar = typeInstanceVar.implementsInterface(interfaceType)	确定此类型是否实现了指定接口。
var isInheritedFromVar = TypeA.inheritsFrom(parentType);	确定此类型是否从指定的父类型继承。
var typeInstanceVar = typeVar.baseClassName.initializeBase(instance, baseArguments );	在给定实例的上下文（它提供了用于继承和用于初始化基成员的模型）中初始化基类及其成员。
Type.isClass(type);	返回一个值，该值指示指定的类型是否为类。
public static function isEnum( type : Object ) : Boolean	指示指定的类型是否为枚举。
public static function isFlags( type : Object ) : Boolean	获取一个值，该值指示指定的类型是否为标志的整数。
var isImplementedVar = aType.isImplementedBy(typeInstanceVar);	确定实例是否实现了指定接口。
var isInstanceOfTypeVar = TypeA.isInstanceOfType(instance);	确定对象是否为指定类型或其某个派生类型的实例。
Type.isInterface(type);	返回一个值，该值指示指定的类型是否为接口。
Type.isNamespace(object);	返回一个值，该值指示指定对象是否为命名空间。
var typeVar = Type.parse(typeName, ns);	返回通过类型名称指定的类型的一个实例。
classInstanceVar.registerClass(typeName, baseType, interfaceTypes)	注册一个由构造函数定义、具有可选基类型并带有接口的类。
public function registerEnum( name : String, flags : Boolean )	注册一个枚举。
var interfaceVar = typeInstanceVar.registerInterface(typeName)	注册一个由其构造函数指定的接口。
Type.registerNamespace(namespacePath)	注册并创建一个命名空间。
typeVarInstance.resolveInheritance();	将成员从基类复制到与派生类相关联的原型，并沿继承链向上继续执行此过程。这使您可以在派生类型的继承成员上进行反射。

Type 类的方法通过创建类型化系统并启用类型反射，将面向对象编程功能添加到 ECMAScript (JavaScript) 代码中。使用此类可以注册代码关系和结构，其中包括类、接口、基类和枚举。可以使用 Type 反射方法（如 isInstanceOfType 和 isImplementedBy）来检查类。内置 JavaScript Function 对象的别名为 Type。因此，通过 Type API 创建的自定义类型对象可以使用许多 Type 方法。

命名空间

Microsoft AJAX Library 提供一种注册命名空间以便可以对常见功能进行分组的方式。

使用命名空间，可以合理的组织大量的类型，使开发人员能够方便的找到他们所需要的类型

可重复注册命名空间，每个独立的脚本模块前都要注册命名空间以保证命名空间存在

命名空间是使您可以组织代码的范围区域。这对于大型项目特别有用。使用命名空间可以对类进行分组。这样，每个类名便由其命名空间限定，从而可以创建全局唯一类名。

在一个命名空间中，可以声明下列一个或多个类：

其他命名空间
类
接口
枚举
委托

一个完全限定类名包含其命名空间，并以 .（点）运算符分隔，如 MyNamespace.MyType。命名空间名称可以包含 A–Z 范围内的大写或小写字母以及 0-9 范围内的整数。

使用 registerNamespace 方法可以创建命名空间。

在实际的开发中，命名空间是可以重复注册的，最好是在每个独立的脚本模块前都要注册命名空间以保证命名空间存在.

//注册一个命名空间
Type.registerNamespace("jweaving");

类

类有四种成员：字段、属性、方法和事件。

字段和属性是名称/值对，用于描述类实例的特征。

字段由基元类型组成，可直接进行访问

属性可以表示任何基元类型或引用类型。属性值需通过 get 和 set 访问器方法进行访问。

访问修饰符

大多数面向对象的编程语言都包括“访问修饰符”这一概念。通过访问修饰符，可以指定类或成员可用的上下文，例如是对外部程序可用，还是对同一命名空间中的内部类可用，抑或是仅在特定的代码块中可用。 JavaScript 中没有访问修饰符。但是，Microsoft AJAX Library 遵循以下约定：名称以下划线字符（“_”）开头的成员视为私有成员，不能从成员所属类的外部访问它们。

类的定义

定义构造函数
定义类的成员(属性，方法，事件)
注册类

定义构造函数

类的构造函数即为function定义

通常用于初始化域变量

自由成员使用下划线开头（形式上的封装）

MyNamespace.MyClass=function(parm1,…){…}

//定义一个构造函数
jweaving.Person = function(firstName, lastName, emailAddress) {
    //初始化域变量
    this._firstName = firstName;
    //初始化域变量
    this._lastName = lastName;
    //初始化域变量
    this._emailAddress = emailAddress;
}

定义属性

Microsoft AJAX Library的面向对象类型系统将get_xxx和set_xxx开头的方法认做属性（一种约定）

避免定义只写属性，使用某个方法替代

//定义属性
getFirstName: function() {
    return this._firstName;
}, 
setFirstName: function(firstName) {
    this._firstName = firstName;
}

定义方法

使用prototype定义

MyNamespace.MyClass.prototype={method1:function{},method2:function()}

//定义类成员
jweaving.Person.prototype = {
    //定义方法
    show : function() {
        alert('Hello ' + this.getName());
    }
}

注册类

//注册类

jweaving.Person.registerClass('jweaving.Person');

完整版本

//注册一个命名空间
Type.registerNamespace("jweaving");

//定义一个构造函数
jweaving.Person = function(firstName, lastName, emailAddress) {
    //初始化域变量
    this._firstName = firstName;
    //初始化域变量
    this._lastName = lastName;
    //初始化域变量
    this._emailAddress = emailAddress;
}

//定义类成员
jweaving.Person.prototype = {
    //定义属性
    getFirstName: function() {
        return this._firstName;
    },
    setFirstName: function(firstName) {
       this._firstName = firstName;
    },
    //定义属性
    getLastName: function() {
        return this._lastName;
    },
    set LastName:: function(lastName) {
       this._firstName = lastName;
    }
    //定义属性
    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },
    //定义方法
    show: function() {
        alert('Hello ' + this.getName());
    }
}

示例

2-namespace-class.html

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
       <script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script>

        <script type="text/javascript">
            Type.registerNamespace("jweaving.tutorials");

            jweaving.tutorials.TextBlock = function(name, text) {
                this._name = name;
                this._text = text;
                this._color = "#000000";
                this._style = "normal";
            };

            jweaving.tutorials.TextBlock.prototype = {
                getName : function() {
                    return this._name;
                },
                getText : function() {
                    return this._text;
                },
                getColor : function() {
                    return this._color;
                },
                setColor : function(color) {
                    this._color = color;
                },
                getStyle : function() {
                    return this._style;
                },
                setStyle : function(style) {
                    this._style = style;
                },
                write : function() {
                    if(this._style == "bold") {
                        document.write(String.format('<div><b name="{0}" style="color:{1};" >{2}</b></div>', this._name, this._color, this._text));
                    } else if(this._style == "italic") {
                        document.write(String.format('<div><i name="{0}" style="color:{1};" >{2}</i></div>', this._name, this._color, this._text));
                    } else if(this._style == "underline") {
                        document.write(String.format('<div><u name="{0}" style="color:{1};" >{2}</u></div>', this._name, this._color, this._text));
                    } else {
                        document.write(String.format('<div name="{0}" style="color:{1};" >{2}</div>', this._name, this._color, this._text));
                    }
                }
            }

            jweaving.tutorials.TextBlock.registerClass('jweaving.tutorials.TextBlock');

        </script>
    </head>
    <body>
        <script type="text/javascript">
            var textBlock1 = new jweaving.tutorials.TextBlock('textBlock1', 'Hello World!');

            textBlock1.write();

            textBlock1.setColor('#ff0000');
            textBlock1.write();

            textBlock1.setStyle('italic');
            textBlock1.write();

        </script>
    </body>
</html>

references

Microsoft AJAX Library Cheat Sheet——ASP.NET AJAX客户端框架的快速参考系列：http://www.cnblogs.com/dflying/archive/2007/02/09/639638.html

Microsoft AJAX Library Cheat Sheet ——ASP.NET AJAX客户端框架的快速参考：http://www.cnblogs.com/allnen/archive/2009/03/23/1419490.html

在Microsoft AJAX Library下JavaScript的面向对象开发：http://www.cnblogs.com/beniao/archive/2008/06/08/1204388.html

Microsoft Ajax：http://msdn.microsoft.com/zh-cn/library/ee341002.aspx
使用 Microsoft Ajax Library 创建自定义客户端脚本：http://msdn.microsoft.com/zh-cn/library/bb386453.aspx

领先技术: 深入了解 Microsoft AJAX Library：http://msdn.microsoft.com/zh-cn/magazine/cc163300.aspx

Microsoft AJAX Library Cheat Sheets：http://aspnetresources.com/blog/ms_ajax_cheat_sheets_batch2

ASP.NET AJAX深入浅出系列课程：http://www.microsoft.com/china/msdn/events/webcasts/shared/webcast/series/ASP_Ajax.aspx http://msdnwebcast.net/webcast/4/1957/

posted @ 2012-02-12 13:45 GuYoung 阅读(885) 评论(0) 编辑收藏

刷新评论刷新页面返回顶部

程序员问答社区，解决您的IT难题

博客园首页博问新闻闪存程序员招聘知识库

使用MicrosoftAJAX实现Javascript面向对象（二）命名空间、类

命名空间、类

Type 类

命名空间

类

示例

公告