使用 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', 'jack@hotmail.com');
alert(person.getEmailAddress());

var employee = new Demo.Employee('Jack', 'Smith', 'jack@hotmail.com', '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.");
    }
}


本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2013/01/06/2847681.html,如需转载请自行联系原作者
相关文章
|
12月前
|
JSON 前端开发 数据格式
Echarts饼状图数据交互请求ajax自定义颜色
Echarts饼状图数据交互请求ajax自定义颜色
35 0
|
JSON 前端开发 JavaScript
舒工自定义AJAX-lite 1.0实用型极简方法
舒工自定义AJAX-lite 1.0实用型极简方法
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
721 0
|
安全 JavaScript 前端开发
Springboot如何优雅的解决ajax+自定义headers的跨域请求
Springboot如何优雅的解决ajax+自定义headers的跨域请求
Springboot如何优雅的解决ajax+自定义headers的跨域请求
|
安全 前端开发 Java
【Kotlin Spring Boot 服务端开发: 问题集锦】 Spring Security : 自定义AccessDeniedHandler 处理 Ajax 请求
【Kotlin Spring Boot 服务端开发: 问题集锦】 Spring Security : 自定义AccessDeniedHandler 处理 Ajax 请求 AccessDeniedHandler 接口定义: package org.
3292 0