使用 Microsoft Ajax Library 创建自定义客户端脚本

MSDN地址：http://msdn.microsoft.com/zh-CN/library/bb386453.aspx

Microsoft Ajax Library是微软提供的一套基于客户端的Ajax js库，通过在页面中添加ScriptManager控件可以管理这些脚本和任何自定义的脚本。

本节所介绍的所有内容均依赖于该JS库，与服务器开发无关！

MS Ajax Library有一些功能：

• 向js中添加了面向对象的功能，可以使用类、命名空间、继承等组织js代码。
• 反射功能，在运行时检查客户脚本的结构和组件。
• 枚举
• 扩展了JS的基类型，缩短开发时间
• 更好的调试和跟踪功能。

JS面向对象的用法

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

//注册命名空间
Type.registerNamespace("Demo");

//为命名空间添加Person类，后面的方法为Person的构造函数
Demo.Person = function (firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

//Person类的方法
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
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

//定义Employee类
Demo.Employee = function (firstName, lastName, emailAddress, team, title) {
    Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]);

    this._team = team;
    this._title = title;
}
//Employee类的方法
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;
    },
    toString: function () {
        return Demo.Employee.callBaseMethod(this, 'toString') + '\r\n' + this.getTitle() + '\r\n' + this.getTeam();
    }
}
//注册Demo.Employee类，并指定其继承自Demo.Person类
Demo.Employee.registerClass('Demo.Employee', Demo.Person);

 

调用的代码：

var person = new Demo.Person('Jack', 'Smith', '[email protected]');
alert(person.getEmailAddress());

var employee = new Demo.Employee('Jack', 'Smith', '[email protected]', 'Web Dev', '');
alert(employee.getTeam());

使用接口

//注册接口
Demo.Trees.IFruitTree.registerInterface('Demo.Trees.IFruitTree');

//使用接口
//类Demo.Trees.FruitTree继承了Demo.Trees.Tree，并实现了接口Demo.Trees.IFruitTree
Demo.Trees.FruitTree.registerClass('Demo.Trees.FruitTree', Demo.Trees.Tree, Demo.Trees.IFruitTree);

使用枚举

//注册命名空间
Type.registerNamespace("Demo");
//定义枚举类型
Demo.Color = function () { };
Demo.Color.prototype =
{
    Red: 0xFF0000,
    Blue: 0x0000FF,
    Green: 0x00FF00,
    White: 0xFFFFFF
}
//注册枚举类型
Demo.Color.registerEnum("Demo.Color");

//用法
var color = Demo.Color.Red;

 

反射的用法

反射是指在运行时检查程序的结构和组件的能力。实现反射的 API 是对 Type 类的扩展。通过这些方法，可以收集有关对象的信息，例如该对象继承自谁，它是否实现特定的接口，以及它是否是特定类的实例等。

var g = new Demo.Trees.GreenApple();
var gt = Demo.Trees.GreenApple;
var a = new Array(
    Demo.Trees.Apple,
    Demo.Trees.Tree,
    Demo.Trees.Pine,
    Demo.Trees.IFruitTree,
    Sys.IContainer);

function OnButton1Click() {
    for (var i = 0; i < a.length; i++) {
        //是否为某一类型的实例
        if (a[i].isInstanceOfType(g)) { 
            alert(gt.getName() + " is a " + a[i].getName() + ".");
        }
        else alert(gt.getName() + " is not a " + a[i].getName() + ".");
    }
}

function OnButton2Click() {
    for (var i = 0; i < a.length; i++) {
        //是否继承自某一类型
        if (gt.inheritsFrom(a[i])) {
            alert(gt.getName() + " inherits from " + a[i].getName() + ".");
        }
        else alert(gt.getName() + " does not inherit from " + a[i].getName() + ".");
    }
}

function OnButton3Click() {
    for (var i = 0; i < a.length; i++) {
        //判断类型是否为接口
        if (Type.isInterface(a[i])) {
            //判断对象是否实现了接口
            if (gt.implementsInterface(a[i])) {
                alert(gt.getName() + " implements the " + a[i].getName() + " interface.");
            }
            else alert(gt.getName() + " does not implement the " + a[i].getName() + " interface.");
        }
        else alert(a[i].getName() + " is not an interface.");
    }
}