现在的位置: 首页 > 综合 > 正文

ASP.NET – 使用 Microsoft AJAX Library 创建自定义客户端脚本

2012年10月28日 ⁄ 综合 ⁄ 共 5075字 ⁄ 字号 评论关闭

当您要执行下列操作时,可以使用 Microsoft AJAX Library 的功能:

·向 JavaScript 代码中添加面向对象的功能,以提高代码的重用性、灵活性和可维护性。

·使用反射在运行时检查客户端脚本的结构和组件。

·使用枚举提供不同于整数的另一种易读的表示形式。

·使用 JavaScript 基类型的扩展缩短常规脚本任务的开发时间。

·使用调试扩展和跟踪功能,实现比传统 JavaScript 调试技术更快、信息更丰富的调试。

 

一、使用类型系统

Microsoft AJAX Library 增加了一个类型系统以及一系列对 JavaScript 对象的扩展,可提供与 .NET Framework 功能类似的面向对象的常用功能。利用这些功能,可按一种结构化方式编写支持 AJAX ASP.NET 应用程序,这不仅能提高可维护性,还简化了添加功能以及对功能分层的操作。Microsoft AJAX Library 扩展为 JavaScript 添加了下列功能:

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

 

该库还提供了针对字符串和数组的 Helper 函数。

 

1.1、类、成员和命名空间

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

Type 类为 JavaScript 编程添加了命名空间、类和继承等面向对象的功能。任何使用 Type 类注册的 JavaScript 对象都会自动获得访问此功能的权限。下面的示例演示如何使用 Type 类在 JavaScript 文件中创建并注册一个命名空间和类:

Type.registerNamespace("Demo");

 

Demo.Person = function(firstName, lastName, emailAddress) {

    this._firstName = firstName;

    this._lastName = lastName;

    this._emailAddress = emailAddress;

}

 

Demo.Person.prototype = {

 

    getFirstName: function() {

        return this._firstName;

    },

 

    getLastName: function() {

        return this._lastName;

    },

 

    getName: function() {

        return this._firstName + ' ' + this._lastName;

    },

 

    dispose: function() {

        alert('bye ' + this.getName());

    }

}

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

 

// Notify ScriptManager that this is the end of the script.

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

      类有四种成员:字段、属性、方法和事件。字段和属性是名称/值对,用于描述类实例的特征。字段由基元类型组成,可直接进行访问,如下面的示例所示:

myClassInstance.name="Fred"

      属性可以表示任何基元类型或引用类型。属性值需通过 get set 访问器方法进行访问。在 Microsoft AJAX Library 中,get set 访问器都是函数。按照约定,这些函数的名称中应使用前缀“get_”或“set_”。例如,若要获取或设置属性 cancel 的值,需要调用 get_cancel set_cancel 方法。

对于在 AJAX 客户端应用程序生命周期中发生的操作,Microsoft AJAX Library 将引发相应的事件进行响应。Microsoft AJAX Library 还提供一种为 AJAX 客户端组件创建自定义事件的标准方式。

Microsoft AJAX Library 提供一种有助于对常用功能进行分组的命名空间注册方式。下面的示例演示如何使用 Type.registerNamespace .registerClass 方法向 Demo 命名空间中添加 Person 类。

若要对 ASP.NET 网页启用 AJAX 功能,必须向该页面添加 ScriptManager 控件。呈现该页面时,将自动生成对 AJAX 客户端脚本库的相应脚本引用。下面的示例演示一个包含 ScriptManager 控件的页面。

<asp:ScriptManager runat="server" ID="scriptManager" />

      下面的示例演示如何完成以下过程:注册命名空间,创建类,然后重新注册该类。

Type.registerNamespace("Demo");

 

Demo.Person = function(firstName, lastName, emailAddress) {

    this._firstName = firstName;

    this._lastName = lastName;

    this._emailAddress = emailAddress;

}

 

Demo.Person.prototype = {

 

    getFirstName: function() {

        return this._firstName;

    },

 

    getLastName: function() {

        return this._lastName;

    },

 

    getName: function() {

        return this._firstName + ' ' + this._lastName;

    },

 

    dispose: function() {

        alert('bye ' + this.getName());

    }

}

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

 

// Notify ScriptManager that this is the end of the script.

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 

Type.registerNamespace("Demo");

 

Demo.Person = function(firstName, lastName, emailAddress) {

    this._firstName = firstName;

    this._lastName = lastName;

    this._emailAddress = emailAddress;

}

 

Demo.Person.prototype = {

 

    getFirstName: function() {

        return this._firstName;

    },

 

    getLastName: function() {

        return this._lastName;

    },

 

    getName: function() {

        return this._firstName + ' ' + this._lastName;

    },

 

    dispose: function() {

        alert('bye ' + this.getName());

    }

}

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

 

// Notify ScriptManager that this is the end of the script.

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 

1.2、访问修饰符

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

 

1.3、继承

继承是指一个类从另一个类派生的能力。派生类可自动继承基类的所有字段、属性、方法和事件。派生类可以添加新成员或者重写基类的现有成员,以更改这些成员的行为。

下面的示例包含两个在脚本中定义的类:Person Employee,其中 Employee 派生自 Person。这两个类演示私有字段的用法,并且它们都具有公共属性和方法。此外,Employee 还重写 Person 类的 toString 实现并使用基类的功能。

Type.registerNamespace("Demo");

 

Demo.Person = function(firstName, lastName, emailAddress) {

    this._firstName = firstName;

    this._lastName = lastName;

    this._emailAddress = emailAddress;

}

 

Demo.Person.prototype = {

    getFirstName: function() {

        return this._firstName;

    },

 

    getLastName: function() {

        return this._lastName;

    },

 

    getEmailAddress: function() {

        return this._emailAddress;

    },

    setEmailAddress: function(emailAddress) {

        this._emailAddress = emailAddress;

    },

 

    getName: function() {

        return this._firstName + ' ' + this._lastName;

    },

 

    dispose: function() {

        alert('bye ' + this.getName());

    },

 

    sendMail: function() {

        var emailAddress = this.getEmailAddress();

 

        if (emailAddress.indexOf('@') < 0) {

            emailAddress = emailAddress + '@example.com';

        }

        alert('Sending mail to ' + emailAddress + ' ...');

    },

 

    toString: function() {

        return this.getName() + ' (' + this.getEmailAddress() + ')';

    }

}

 

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

Demo.Employee = function(firstName, lastName, emailAddress, team, title) {

    Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]);

 

    this._team = team;

    this._title = title;

}

 

Demo.Employee.prototype = {

 

    getTeam: function() {

        return this._team;

    },

    setTeam: function(team) {

        this._team = team;

    },

 

    getTitle: function() {

        return this._title;

    },

    setTitle: function(title) {

        this._title = title;

    },

抱歉!评论已关闭.