使用MicrosoftAJAX实现Javascript面向对象（一）Microsoft AJAX Library

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

使用MicrosoftAJAX实现Javascript面向对象（一）Microsoft AJAX Library

2012年12月28日 ⁄ 综合 ⁄ 共 10809字 ⁄ 字号小中大 ⁄ 评论关闭

文章目录

示例

Microsoft AJAX Library

Microsoft Ajax Library是一个纯客户端JavaScript库，能够与所有现代浏览器，包括Internet Explorer，Google Chrome，Apple Safari和Mozilla Firefox相兼容。你可以利用Microsoft Ajax Library的优势来建立完全在Web浏览器中运行的高度响应和交互式的数据库驱动的Web应用程序。

因为Microsoft Ajax Library是一个纯客户端JavaScript库，所以，你既可以在ASP.NET的Web Forms中使用也可以在ASP.NET MVC应用程序中使用。您还可以创建只包括HTML内容的Ajax网页。

Microsoft Ajax Library以开放源代码的方式独立于ASP.NET 4发行，并作为完全受微软支持的产品存在。

Microsoft AJAX Library 中提供了一个功能丰富的框架，可以简化客户端编程。

Microsoft AJAX Library 由两个相关的部分组成：JavaScript 语言扩展和一种基类库，可为开发人员提供预定义的服务和工具。尽管对象的概念已深入人心，但是 JavaScript 本身不能作为面向对象的语言，因为它无法在本机全面实现面向对象编程的三个支柱：继承、多态性和封装。通过对象原型可以获得少许继承，通过闭包也可以获得少许封装。因此 Microsoft AJAX Library 会先为语言提供更多强大的工具，然后再继续定义新的类和编程工具。

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

Microsoft AJAX Library 扩展为 JavaScript 添加了下列功能：

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

Microsoft AJAX Library 本身是独立的，可用 JavaScript 进行编写，并存储在几个 .js 文件中。这意味着只要正确引用了构成文件，任何接受 JavaScript 的编程环境都可以成功地使用 Microsoft AJAX Library。Microsoft AJAX Library 中包括两个主要的文件：MicrosoftAjax.js 和 MicrosoftAjaxWebForms.js。MicrosoftAjax.js 定义 Microsoft AJAX Library 支持的语言扩展，包括命名空间、接口、枚举和继承。MicrosoftAjaxWebForms.js 则定义部分呈现引擎和整个网络堆栈。

下载Microsoft Ajax库的最新版本：http://www.asp.net/ajax/

当您要执行下列操作时，可以考虑使用Microsoft AJAX Library：

向 JavaScript 代码中添加面向对象的功能，以提高代码的重用性、灵活性和可维护性。
使用反射在运行时检查客户端脚本的结构和组件。
使用枚举提供不同于整数的另一种易读的表示形式。
使用 JavaScript 基类型的扩展缩短常规脚本任务的开发时间。
使用调试扩展和跟踪功能，实现比传统 JavaScript 调试技术更快、信息更丰富的调试。

JavaScript 基类型的扩展

Array 类型扩展：通过添加静态方法提供对基本 JavaScript Array 功能的扩展。

Boolean 类型扩展：提供对基本 JavaScript Boolean 对象的扩展。

Date 类型扩展：提供对基本 JavaScript Date 对象的扩展。

Error 类型扩展：通过提供异常详细信息以及对应用程序编译模式（调试或发布）的支持，提供扩展了内置 JavaScript Error 类型的静态函数。

Function型扩展：提供静态函数，这些函数包含异常详细信息，并支持应用程序编译模式（调试或发布），从而扩展了内置 ECMAScript (JavaScript) Function 类型。

Number 类型扩展：以静态方法和实例方法扩展基本 JavaScript Number 功能。

Object 类型扩展：向基本 JavaScript Object 对象提供类似反射的扩展功能。

String 类型扩展：以静态方法和实例方法提供对基本 JavaScript String 功能的扩展。

Array 类型扩展

Array 扩展是 Microsoft AJAX Library 的一部分。它们将静态方法添加到 JavaScript Array 对象以获得更多功能。

通过添加静态方法，提供对基本 ECMAScript (JavaScript) Array 功能的扩展。

var arrayVar = new Array("Saturn","Mars","Jupiter");

Array.add(arrayVar, "Earth");

成员扩展：

Array.add(array, item);	将一个元素添加到 Array 对象的末尾。
Array.addRange(array, items);	将指定数组的所有元素复制到 Array 对象的末尾。
Array.clear(array);	从 Array 对象中移除所有元素。
var cloneVar = Array.clone(array)	创建 Array 对象的浅表副本。
var itemExists = Array.contains(array, item);	确定某个元素是否在 Array 对象中。
var firstElement = Array.dequeue(array);	从 Array 对象中移除第一个元素。
Array.enqueue(array, item);	将一个元素添加到 Array 对象的末尾。注意: 使用 add 函数而不是 Array.enqueue 函数。此函数支持“客户端-脚本”基础结构，不能在代码中直接使用。
Array.forEach(array, method, instance);	对 Array 对象的每个元素执行指定操作。
var indexVar = Array.indexOf(array, item, start);	搜索 Array 对象的指定元素并返回该元素的索引。
Array.insert(array, index, item);	在 Array 对象中的指定位置插入值。
var a = Array.parse(value);	从字符串表示形式创建 Array 对象。
var isRemoved = Array.remove(array, item);	移除 Array 对象中某个元素的第一个匹配项。
Array.removeAt(array, index);	移除 Array 对象中指定位置的元素。

Boolean 类型扩展

Boolean 扩展是 Microsoft AJAX Library 的一部分。这些扩展在 JavaScript Boolean 对象中添加了功能，并提供了 .NET 编程人员更熟悉的成员。

提供对基本 ECMAScript (JavaScript) Boolean 对象的扩展。

var booleanVar = new Boolean(true);

成员扩展：

var booleanVar = Boolean.parse("true");

将逻辑值的字符串表示形式转换为其 Boolean 等效对象。

Date 类型扩展

日期扩展是 Microsoft AJAX Library 的一部分，为 JavaScript Date 对象添加了功能。

提供对基本 ECMAScript (JavaScript) Date 基对象的扩展。

var a = new Date();

成员扩展：

var a = dateVar.format(format);	使用固定（与具体区域性无关的）区域性设置日期的格式。
var formattedDate = dateVar.localeFormat(format);	使用当前区域性根据区域设置特定的字符串创建日期。
var a = Date.parseLocale(value, formats);	使用当前区域性根据区域设置特定的字符串创建日期。
var a = Date.parseInvariant(value, formats);	使用固定区域性根据字符串创建日期。

支持的格式

d：缩写日期(e.g.: 02/17/2007)：

D：完整日期(e.g: Saturday, 17 February 2007)

t：缩写时间(e.g.: 22:10)

T：完整时间(e.g.: 22:10:30)

F：完整时间日期(e.g.: Saturday, 17 February 2007 22:10:30)

m (or M)：月和日(e.g.: February 17)

s：可排序的时间日期(e.g.: 2007-02-17T22:10:30)

y (or Y)：年和月(e.g.: 2007 February)

Error 类型扩展

Error 扩展是 Microsoft AJAX Library 的一部分。这些扩展为内置的 JavaScript Error 对象添加了功能。

提供静态函数，这些函数包含异常详细信息，并支持应用程序编译模式（调试或发布），从而扩展了基本 ECMAScript (JavaScript) Error 类型。

var err = Error.create(message, errorInfo);

错误类型

Error 类型扩展生成一个 Error 类型，该类型带有表示异常详细信息的附加字段。所有 Error 类型扩展添加至少一个 name 字段以标识异常。可以测试异常的 name 字段以确定要进行的操作。

成员扩展：

var err = Error.argument(paramName, message);	创建一个表示 Sys.ArgumentException 异常的 Error 对象。
var err = Error.argumentNull(paramName, message);	创建一个表示 Sys.ArgumentNullException 异常的 Error 对象。
var err = Error.argumentOutOfRange(paramName, actualValue, message);	创建一个表示 Sys.ArgumentOutOfRangeException 异常的 Error 对象。
var err = Error.argumentType(paramName, actualType, expectedType, message);	创建一个表示 Sys.ArgumentTypeException 异常的 Error 对象。
var err = Error.argumentUndefined(paramName, message);	创建一个表示 Sys.ArgumentUndefinedException 异常的 Error 对象。
var err = Error.create(message, errorInfo);	创建一个 Error 对象，该对象包含可选的更多错误信息。
public static function format( message : String ) : Object	创建一个表示 Sys.FormatException 异常的 Error 对象。
var err = Error.invalidOperation(message);	创建一个 Error 对象，该对象表示 Sys.InvalidOperationException 异常。
public var message : String	表示对错误的说明。
public var name : String	表示用于标识错误的名称。
var err = Error.notImplemented(message);	创建一个 Error 对象，该对象表示 Sys.NotImplementedException 异常。
var err = Error.parameterCount(message);	创建一个表示 Sys.ParameterCountException 异常的 Error 对象。
errorInstanceVar.popStackFrame();	更新 Error 实例的 fileName 和 lineNumber 属性，可以指示引发错误的位置而不是创建错误的位置。如果要创建自定义错误类型，请使用此函数。

Function类型扩展

提供静态函数，这些函数包含异常详细信息，并支持应用程序编译模式（调试或发布），从而扩展了内置 ECMAScript (JavaScript) Function 类型。

var func = function Function(param1, param2, paramN);

成员扩展：

Function.createCallback 函数	创建回调函数，该函数可以保留最初在对象创建期间使用的参数。
Function.createDelegate 函数	创建委托函数，该函数可以保留最初在对象创建期间使用的上下文。
Function.emptyMethod 函数	不执行任何操作的函数。
Function.validateParams 函数	验证方法的参数是否与预期一致。

Number 类型扩展

Number 扩展是 Microsoft AJAX Library 的一部分。这些扩展在 JavaScript Number 对象中添加了功能，并提供了 .NET 编程人员更熟悉的成员。

以静态方法和实例方法扩展基本 ECMAScript (JavaScript) Number 功能。

var numberVar = Number.parseInvariant("4");

成员扩展：

var a = numberVar.format(format);	使用固定区域性设置数字格式。
var a = numberVar.localeFormat(format);	使用当前区域性设置数字格式。
var numberVar = Number.parseInvariant(value);	从数字的字符串表示形式返回数值。
var numberVar = Number.parseLocale(value);	根据特定于区域设置的字符串创建数字。

Object 类型扩展

Object 扩展是 Microsoft AJAX Library 的一部分。这些扩展为内置的 JavaScript Object 对象添加了功能。 Object 扩展提供有关类型化实例的类似反射的信息。使用这些方法可发现对象的类型和类型名称。

向基本 ECMAScript (JavaScript) Object 对象提供扩展的类似反射的功能

var objectVar = new Object();

成员扩展：

var typeVar = Object.getType(instance);	返回指定对象实例的类型。
var typeNameVar = Object.getTypeName(instance);	返回标识对象的运行时类型名称的字符串。

String 类型扩展

String 扩展是 Microsoft AJAX Library 的一部分。这些扩展在 JavaScript String 对象中添加了功能，并提供了 .NET 编程人员更熟悉的成员。

通过静态方法和实例方法，提供对基本 ECMAScript (JavaScript) String 对象的扩展。

var stringVar = new String();

成员扩展：

var hasSuffixVar = myString.endsWith(suffix);	确定 String 对象的末尾是否与指定的字符串匹配。
var s = String.format(format, args);	将 String 对象中的每个格式项替换为相应对象值的文本等效项。
var a = String.localeFormat(format, args);	将 String 对象中的格式项替换为相应对象值的文本等效项。使用当前区域性设置日期和数字的格式。
var hasPrefix = myString.startsWith(prefix);	确定 String 对象的开头是否与指定的字符串匹配。
var trimmedStringVar = myString.trim();	从 String 对象实例移除前导空白字符和尾随空白字符。
var trimmedStringVar = myString.trimEnd();	从 String 对象实例移除尾随空白字符。
var trimmedStringVar = myString.trimStart();	从 String 对象实例移除前导空白字符。

示例

1-type-extensions.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"></script>
</head>
<body>
<div id="results"></div>
<script type="text/javascript">
// Array 类型扩展
function displayTable(arrayTable, element) {
var tableMarkup;
                tableMarkup = "<table border=on>";
var rows = arrayTable[0][0].length;

for( x = 0; x <= rows; x++) {
                    tableMarkup += "<tr>";
var columns = arrayTable[x].length - 1;
for( y = 0; y <= columns; y++) {
                        tableMarkup += "<td>" + arrayTable[x][y] + "</td>";
                    }
                    tableMarkup += "</tr>";
                }
                tableMarkup += "</table>";

                element.innerHTML += tableMarkup;

                Array.clear(arrayTable);
            }

function createTableData() {
var costsArray = [];

var headerRow = new Array("ID", "Name", "Costs");
var firstRow = new Array("1", "ruler", "1.30");
var secondRow = new Array("2", "binder", "4.75");

                Array.add(costsArray, headerRow);
                Array.add(costsArray, firstRow);
                Array.add(costsArray, secondRow);

return costsArray;
            }

var myTable = createTableData();
var element = $get("results");
            displayTable(myTable, element);

// Boolean 类型扩展
var b1 = new Boolean(true);
if(b1 == true) {
                alert("b1 = true");
            } else {
                alert("b1 = false");
            }

var b2 = Boolean.parse("False");
if(b2 == true) {
                alert("b2 = true");
            } else {
                alert("b2 = false");
            }

//Date 类型扩展
var d1 = new Date();
            alert("d1: " + d1.format("dddd, dd MMMM yyyy HH:mm:ss"));

var d2 = Date.parseLocale("2/10/2012", "yyyy-MM-dd", "MM/dd/yyyy");
            alert("d2: " + d2.localeFormat("dddd, dd MMMM yyyy HH:mm:ss"));

//Number 类型扩展
var a = Number.parseInvariant("4");
var b = new Number(2);
var c = Number.parseInvariant("1.53") + a + b;
            alert(c);

//String 类型扩展
var newStr = new String("       This is a string   ");
var trimmedStr = newStr.trim();
            alert("The string with white spaces removed:" + trimmedStr + ".");

//Object 类型扩展
            Type.registerNamespace("Samples");

            Samples.Rectangle = function(width, height) {
this._width = width;
this._height = height;
            }

            Samples.Rectangle.registerClass("Samples.Rectangle");

var a = new Samples.Rectangle(200, 100);
var name = Object.getTypeName(a);
var type = Object.getType(a);
            alert("The type name of object \"a\" is: " + name);

//Error 类型扩展
function validateNumberRange(input, min, max) {
if(input === undefined) {
var err = Error.argumentNull("input", "A parameter was undefined.");
throw err;
                } else if(min === undefined) {
var err = Error.argumentNull("min", "A parameter was undefined.");
throw err;
                } else if(max === undefined) {
var err = Error.argumentNull("max", "A parameter was undefined.");
throw err;
                } else if(min >= max) {
var err = Error.invalidOperation("The min parameter must be smaller than max parameter.");
throw err;
                } else if(isNaN(input)) {
                    msg = "A number was not entered.  ";
                    msg += String.format("Please enter a number between {0} and {1}.", min, max);

var err = Error.create(msg);
throw err;
                } else if(input < min || input > max) {
                    msg = "The number entered was outside the acceptable range.  ";
                    msg += String.format("Please enter a number between {0} and {1}.", min, max);

var err = Error.create(msg);
throw err
                }

                alert("The number entered was within the acceptable range.");
            }

var input = undefined;
var min = -10;
var max = 10;

            validateNumberRange(input, min, max);

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

附Microsoft AJAX版本历史

VS2005	Atlas: 最初的版本代号 Asp.net 2.0 AJAX Extensions: 发布版本，在VS2005SP1中包含 ASP.NET AJAX Library – 客户端js脚本库 ASP.NET AJAX Extensions – 服务端控件，不用写JavaScript实现javascript的功能 AJAX Control Toolkit –扩展服务端控件性行为的控件[codeplex开源项目]，如AutoCompleteExtender
VS2008	ASP.NET AJAX AJAX Library和Extension集成到运行时，Control toolkit独立下载，编程时客户端：使用AJAX Library 服务端: 使用AJAX Extensions和Control Toolkit VS2008 Sp1对jQuery支持
VS2010	Microsoft AJAX Library，独立在codelpex上下载客户端的编程：基于jQuery和AJAX Library的增强[如数据绑定、Web服务整合等]进行编程，特别像UI Widget等都由jQuery实现[不用再发明一套新的了] 服务端：AJAX Extension和Control Toolkit 对于RIA，最重要的是微软还有一套基于浏览器的插件支持方案：Silverlight，项目可以在AJAX和sliverlight上选择