什么是Microsoft AJAX Library
- ASP.NET AJAX的客户端部分
- 纯客户端框架
- 提供了JavaScript扩展和基础类库
Object原生类型
- ECMAScript Spec中定义：一个无序的集合，可以存放任意类型的对象
- 常作为字典使用
- 可以使用for-in遍历字典中的每一项
- 禁止扩展其prototype对象
- Miicrosoft AJAX Library并没有扩展Object 类型
Object.prototype
- toString()/toLocalString() 得到表示当前对象与环境无/有关的字符串
- valueOf() 返回表示该对象的value
- hasOwnProperty(propertyName) 对象上是否直接定义了某属性（直接！！！）
- isPrototypeOf(obj) obj是不是当前对象的prototype对象
- propertyIsEnumerable(propertyName)某属性是否可遍历（不考虑prototype链）
一个使用Object原生类型的示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="info"> </div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML += (text + "<br/>"); } function useAsDictionary() { var obj=new Object(); obj["name"]="xiaoyaojian";//Key="name",Value="xiaoyaojian" obj.salary=9000;//这是另外一种设置值的方式 display("Name:"+obj.name); display("Salary:"+obj["salary"]); display("____________________"); } function usrForInStatement() { var dictionary = new Object(); for (var i = 0; i < 10; i++) { var key = "key_" + i; dictionary[key] = Math.random(); } delete dictionary["key_6"]; //删除Key为“key_6”的元素，不可只用dictionary["key_6"]=null这种方式 for (var key in dictionary) { //使用for-in遍历Object display("Key:"+key+",value="+dictionary[key]); } } useAsDictionary(); usrForInStatement() </script> </body> </html>
Array原生类型
- 长度可变的数组对象，最大长度2^32-1，通常情况下，我们已经足够足够足够用啦
- 构造Array对象
new Array();//空数组
new Array();//长度为3的数组，当然，添加多于三个的元素也是可以的，只是初始长度为3
new Array(1,"Xiaoyaojian");//构造两个元素的数组
- length属性：数组长度，W/R
- toString()/toLocalString()方法：返回逗号分割的字符串
- concat([item1[,item2[,…]]])方法：添加元素，返回一个新数组，原数组不变
- push([item1[,item2[,…]]])方法：在数组尾添加一个或多个元素
- pop方法：从数组尾部去除并返回元素
- shift方法：从数组头去除并返回元素
- unshift([item1[,item2[,…]]])方法:在数组头添加一个或多个元素
Array.prototype
- join(separator)方法：返回以separator作为分隔符得到一个连接所有元素的字符串
- reverse()方法：将数组内所有元素逆转
- sort(compareFuncation)方法：参数为一个方法，用于比较两个元素
- slice(start,end)方法：返回一个新数组，包含从下标start开始到下标end-1的元素
- splice(start,deleteCount，[item1[,item2[,…]]])方法：影响当前数组，从下标start开始，删除deleteCount个元素，然后添加元素
一个使用Array原生类型的示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="info"></div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML+=(text+"<br/>"); } Array.prototype.display = function() { window.display("a:"+this); } var a = new Array(1, 2, 3, 4, 5); display("Array initialized"); a.display(); display("a.push(6,7)"); a.push(6, 7); a.display(); display("a.shift():" + a.shift()); a.display(); display("a.unshift(8)"); a.unshift(8); a.display(); display("a.pop()" + a.pop()); a.display(); display("a.concat(9,10)" + a.concat(9, 10)); a.display(); display("'['+a.join('][')+']':" + '[' + a.join('][') + ']'); a.display(); display("a.slice(2,5):" + a.slice(2, 5)); display("a.slice(2,-2)" + a.slice(2, -2)); a.display(); display("a.splice(3,2)"); a.splice(3, 2); a.display(); display("a.splice(2,0,7,8)"); a.splice(2, 0, 7, 8); a.display(); a.display("a.splice(3,1,9,10)"); a.splice(3, 1, 9, 10); a.display(); display("a.reverse()"); a.reverse(); a.display(); display("a.sort()"); a.sort(); a.display(); display("a.sort(function(x,y){return y-x})"); a.sort(function(x, y) { return y - x }); a.display(); </script> </body> </html>
这样我们看结果，就能很清楚的看明白这些函数的作用和用法
Microsoft AJAX Library对Array原生类型的扩展
- 全都是静态方法（为了和其他类库兼容）
- 提供了一些常用的方法
- 提供了语义良好的方法名
- 大多数方法为简单封装
扩展的具体内容
- Array.enqueue(array,item)//入队列，将item添加到array末尾
- Array.dequeue(array)//出队列，返回并删除array的第一元素
- Array.addRange(array.items)//将items数组中所有元素添加至array末尾
- Array.contains(array.item)//如果array中包含item，则返回true,否则false
- Array.clear(array)//清除所有元素
- Array.insert(array.index.item)//将item插入到array中下标为index的位置
- Array.remove(array,index)//从array中移除元素item
- Array.removeAt(array,index)//从array中移除仪表为index的元素
- Array.clone(array)//返回一个与array相同的新数组
- Array.parse(value)//将表示数组的JSON字符串变味一个数组对象
- Array.indexOf(array,item,start)//获得item在array中的下标，从下标start开始查找，不存在则返回-1
- Array.add(array,item)//将item添加至array末尾
- Array.forEach(array,method,instance)//以instance为上下文this引用，将array中的每个元素一次作为参数，循环调用method方法
一个使用Array.forEach方法的示例
创建一个aspx的页面，因为我们要使用Microsoft AJAX Library为我们提供的对于Array的扩展，所以需要在页面中添加一个ScriptManager
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script language="javascript" type="text/javascript"> function method(elt, index, array) {//etc:枚举的当前元素，index:当前下标，array:当前被遍历的array this.result += "[" + index + ". " + elt + "]"; } var items = "i am xiaoyaojian".split(" "); var obj = { result: "" }; Array.forEach(items,method,obj); alert(obj.result); </script> </form> </body> </html>
这样我们就能清楚的看到Array.forEach这个方法的用户啦
Error原生类型
- 表示错误对象（EvalError,URIError,RangeError等继承Error）
- 捕获方式try{throw new Error(…)}catch(e){}
- Error对象IE和FireFox共有属性：message（错误信息）
Error浏览器特定属性
IE
- descript:同message
- number:错误编号，只有脚本引擎抛出的错误才有该属性
FireFox
- fileName:出现错误的页面
- lineNumber:出现错误对象的行号
- stack：出现错误时候的堆栈信息
一个关于错误的示例
创建一个html页面
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script language="javascript" type="text/javascript"> try { throw new Error("一个示例错误"); alert("s"); } catch (e) { var errorMsg = ("Message:" + e.message + "\n"); if (!e.stack) {//判断是否为IE，IE没有Error.stack errorMsg += "Description:" + e.description + "\n"; errorMsg += "Number:" + e.number; } else { errorMsg += "Line Number:" + e.lineNumber + "\n"; errorMsg += "File Name:" + e.fileName + "\n\n"; errorMsg += "Stack Trace:\n" + e.stack; } alert(errorMsg); } </script> </body> </html>
Error原生类型的扩展
- Error.creat(message,errorInfo)//创建新的Error对象，message属性设置为true，将errorInfo上的信息附加到Error
- Error.prototype.popStackFrame():为Error对象整理出更加直观的信息
一个示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager> Please view the page in FireFox <script language="javascript" type="text/javascript"> function getNiceError() { var e = Error.creat("Error Message", { customMessage: "Custom Message" }); e.popStackFrame(); return e; } try { throw getNiceError(); } catch (e) { var errorMsg = ("Message:" + e.message + "\n"); errorMsg += "Line Number:" + e.lineNumber + "\n"; errorMsg += "File Name:" + e.fileName + "\n\n"; errorMsg += "Stack Trace:\n" + e.stack; alert(errorMsg); } </script> </form> </body> </html>
在火狐中运行这个页面的时候，我们就可以看到更多的有用的错误信息
Function原生类型
- 与Array，String等类型处于同等地位
- 每个方法均为Function类型的实例– typeof(Array) == typeof(Function) == “function
- 方法调用时根据发起的对象来确定this上下文引用
- Function.prototype.apply(instance, args)
- Function.prototype.call(instance, [ arg1 [ ,arg2 [ , … ] ] ])
一个使用Function原生类型的示例
定义一个html页面
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="info"></div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML += text + "<br/>"; } function aMethod() { var result = this.toString(); for (var i = 0; i < arguments.length; i++) { result += ", " + arguments[i]; } return result; } var a = new String("i am string A"); var b = new String("i am string B"); a.aMethod = b.aMethod = aMethod; display("aMethod():" + aMethod()); display("a.aMethod():" + a.aMethod()); display("b.aMethod():" + b.aMethod()); display("a.aMethod.call(b,1,2,3)" + a.aMethod.call(b, 1, 2, 3)); display("a.aMethod.apply(b,[1,2,3])" + a.aMethod.call(b,[ 1, 2, 3])); </script> </body> </html>
我们看到，我们直接调用aMethod，出现的是object，实际上它的this当前指向window，而a.aMethod，this指向的是a对象，这里也能明显的看到call和apply的用法
Funcation类型类型扩展
- Function.createDelegate(instance,method)方法：得到一个方法的引用，执行它则会调用method，保证method方法的上下文this引用为instance
- Funcation.creatCallback(method,context)方法：得到一个方法引用，执行它时则会调用method方法，并将context作为 额外的参数传入
使用Function原生类型及扩展的一个扩展
创建一个aspx页面，添加一个ScriptManager
页面中添加如下代码
<asp:ScriptManager ID="s" runat="server" /> <input type="button" value="Click Me" id="btn" /> <script language="javascript" type="text/javascript"> var obj = { text: "xiaoyaojian", onClick: function(e) { alert(this.text); } } obj.onClick(); </script>
这样，执行页面，就弹出一个“xiaoyaojian”
删除obj.onClick();添加$addHandler($get("btn"), "click", obj.onClick);，我们使用Microsoft AJAX Library提供的这种扩浏览器的方式，给按钮添加一个事件
点击按钮，将会弹出一个undefined，这里其实this指定的是当前的window对象，我们需要依旧把this指向obj，就需要这么做
var onClickDelegate = Function.createDelegate(obj, obj.onClick); $addHandler($get("btn"), "click",onClickDelegate);
这样就解决了上面的问题了
我们修改上面的obj
var obj = { text: "xiaoyaojian", onClick: function(e,args) { alert(this.text+"\n"+args); } }
这样，当我们再次点击按钮，就会弹出一个“xiaoyajian undifined”，因为这时只传入了一个参数
这样，我们就需要使用Funcation.creatCallback(method,context)这个方法，
改变onClickDelegate的定义
var onClickDelegate = Function.createCallback(Function.createDelegate(obj, obj.onClick),"xiaobai");
这时，我们传入了一个额外的参数给obj，这样，我们就得到了想要的效果
Boolean原生类型及其扩展
- 使用布尔值，而不要使用Bollean对象（简单的解释为布尔值属于值类型，而Boolean属于对象，不能简单的使用==这些做对比）
- Microsoft AJAX Library中提供的唯一扩展（parse静态方法，eg Boolean.parse("true")值为true）
Number原生类型
- 32为整数或者64为浮点数
- 浮点数范围（MAX_VALUE,MIN_VALUE）
- 极值（POSITIVE_INFINITY,NEGATIVE_INFINITY）
- Not an Number(NaN)
一个Number原生类型的示例
创建一个html页面
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="info"></div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML += text + "<br/>"; } display("Max Value" + Number.MAX_VALUE); display("Min Value" + Number.MIN_VALUE); display("____________________________"); display("Postive infinity=" + Number.POSITIVE_INFINITY); display("Negative infinity=" + Number.NEGATIVE_INFINITY); display("____________________________"); display("1/0=" + (1 / 0)); display("Max Value*10=" + Number.MAX_VALUE * 10); display("Max Value+10=" + (Number.MAX_VALUE + 10)); display("Infinity/10=" + Number.POSITIVE_INFINITY / 10); display("______________________________"); display("NaN=" + Number.NaN); display("parseInt('ABC')=" + parseInt('abc')); display("3-'ABC'=" + (3 - 'ABC')); display("(NaN==NaN)=" + (NaN == NaN)); display("(NaN!=NaN)=" + (NaN != NaN)); display("isNaN(NaN)="+isNaN(NaN)); </script> </body> </html>
通过这个示例的结果，我们就难很清晰的理解这些原生类型啦
Number原生类型的扩展
- 数值和字符串之间的转换
- 字符串->数值（Number.parseLocale(value),Number.parseInvariant(value)）
- 数值->字符串（Number.prototype.format(format),Number.prototype.localFormat(format)）
- localeFormat和parseLocale方法（需要设置EnableScriptGlobalization属性设置为true，以浏览器中设置的语言文化为依据，也可以通过设置Page.Culture来改变，格式信息会输出到页面中）
- parseInvariant和format方法（相当于语言环境为en-US）
一个使用Number原生类型扩展的示例
创建一个aspx页面
<asp:ScriptManager ID="s" runat="server" EnableScriptGlobalization="true"></asp:ScriptManager> <div id="info"></div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML += text + "<br/>"; } var num = 12345678.12345678; display("num.format('p')=" + num.format("p")); display("num.format('d')=" + num.format("d")); display("num.format('c')=" + num.format("c")); display("num.format('n')=" + num.format("n")); display("_________________________________"); display("num.localeFormat('p')=" + num.localeFormat("p")); display("num.localeFormat('d')=" + num.localeFormat("d")); display("num.localeFormat('c')=" + num.localeFormat("c")); display("num.localeFormat('n')=" + num.localeFormat("n")); </script>
打开网页，我们就可以对比的看到各个格式代码与对应的格式啦，打开网页源文件，我们也可以看到关于格式的JSON字符串，以in为我们现在已经设置了EnableScriptGlobalization="true"
Date原生类型
- UTC时间：国际标准时间（格林威治时间）
- 表示日期和事件（一个相对于UTC时间1970-1-1 0时整的毫秒偏移量）
- Date.prototype.getTimezoneOffset() ,获得时差的分钟数
构造Date对象
- var date1=new Date();//表示当前事件对象
- var date2=new Date(0);//1970-1-1 0时整
- var date3=new Date(2011,9,17)//本地时间2011年10月17日0时 注意，月份是从0开始的
- var date4=new Date(Date.UTC(2011,9,17));//表示UTC时间2011年10月17日0时
Date对象->字符串
- 与操作系统无关，与脚本引擎有关（toString(),toDateString(),toTimeString(),toUTCString()）
- 与操作系统有关（toLocaleString(),toLocaleDateString(),toLocaleTimeString()，因为和操作系统有关，所以没有toLocaleUTCString()这种东西的）
字符串->Date对象
- Date.parse(str) 返回表示Date的那个数字，只可识别特定的格式
- 与特定脚本引擎相关(t;Date.parse(new Date(t).toString());Date.parse(new Date(t).toUTCString());)
修改和获取Date对象属性
- getTime / setTime
- getFullYear / setFullYear / getUTCFullYear /setUTCFullYear
- getMonth / setMonth / getUTCMonth / setUTCMonth
- getDate / setDate / getUTCDate / setUTCDate
- getDay / setDay / getUTCDay / setUTCDay
- getHours / setHours / getUTCHours / setUTCHours
- getMinutes / setMinutes / getUTCMinutes /setUTCMinutes
- getSeconds / setSeconds / getUTCSeconds /setUTCSeconds
- getMilliseconds / setMilliseconds / getUTCMilliseconds/ setUTCMillisecond
- 这些都是语义明确的，就不多做解释啦
Date原生类型的扩展
- Date对象和字符串之间的转换
- 字符串->数值（Date.parseLocale(value,formats),Date.parseInvariant(value, formats)）
- 数值->字符串（Date.prototype.format(format)，Date.prototype.localeFormat(format)）
- 预定义的format格式
i：与JavaScript内置功能相同
d：短日期格式
D：长日期格式
t：短时间格式
T：长时间格式
F：完整的时间日期格式
M, m：月份日期格式
Y, y：年和月份格式
一个使用Date原生类型的扩展的示例
创建一个aspx页面
添加如下代码
<asp:ScriptManager runat="server" ID="s" EnableScriptGlobalization="true" /> <div id="info"> </div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML += text + "<br/>"; } var now = new Date(); display("now.localeFormat('d')=" + now.localeFormat('d')); display("now.localeFormat('D')=" + now.localeFormat('D')); display("now.localeFormat('t')=" + now.localeFormat('t')); display("now.localeFormat('T')=" + now.localeFormat('T')); display("now.localeFormat('F')=" + now.localeFormat('F')); display("now.localeFormat('M')=" + now.localeFormat('M')); display("now.localeFormat('Y')=" + now.localeFormat('Y')); display("now.localeFormat('yyyy年,MM月,dd日,hhhh:mm:ss tt dddd')=" + now.localeFormat('yyyy年,MM月,dd日,hhhh:mm:ss tt dddd')); var d = Date.parseLocale("11/9/8", "yy/M/d"); display(d.format("i")); </script>
示例很简单，我就不多做解释了
String原生类型的扩展
- length：获得字符串长度
- charAt(pos)：获得当前位置的字符（串）
- indexOf(str, position)：查找字符串
- lastIndexOf(str, position)：从后查找字符串
- match(regexp)：使用正则表达式检验字符串
- replace(search, replaceValue)：替换字符串
- search(regexp)：在字符串搜索某个子串
- toUpperCase()：将字符串转化为大写
- toLowerCase()：将字符串转化为小写
- split(str)：分割字符串至数组
- substring(start[, end]) 从下标start开始，到下标end-1为止
- slice方法 与substring方法功能几乎相同，如果start小于零，则表示倒数第n位（start +length），end亦是如此
- endsWith：返回布尔值，表明是否以某字符串结尾
- startsWith：返回布尔值，表明是否以某字符串开始
- trim：返回字符串，去处原字符串首尾空白
- trimEnd：返回字符串，去处原字符串结尾空白
- trimStart：返回字符串，去处原字符串起始空白
一个使用String原生类型扩展的示例
创建一个aspx页面，添加如下代码
<asp:ScriptManager ID="s" runat="server" EnableScriptGlobalization="true" /> <div id="info"> </div> <script language="javascript" type="text/javascript"> function display(text) { document.getElementById("info").innerHTML += text + "<br/>"; } display(String.format("Today is {0}.", new Date())); display(String.localeFormat("今天是{0:dddd}",new Date())); </script>
这时，我们改变IE里的区域设置，就可以看到localeFormat这里的区别