ASP.NET AJAX(5)__JavaScript原生类型以及Microsoft AJAX Library什么是Microsoft AJAX LibraryObject原生类型Object.pro

小白哥哥

发布于 2018-03-07 11:24:47

1.3K00

代码可运行

文章被收录于专栏：技术小讲堂技术小讲堂

运行总次数：0

代码可运行

什么是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这里的区别

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2011-10-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度