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

时间:2022-05-03
本文章向大家介绍ASP.NET AJAX(5)__JavaScript原生类型以及Microsoft AJAX Library什么是Microsoft AJAX LibraryObject原生类型Object.pro,主要内容包括什么是Microsoft AJAX Library、Object原生类型、Object.prototype、Array原生类型、Array.prototype、Microsoft AJAX Library对Array原生类型的扩展、Error原生类型、Error原生类型的扩展、Function原生类型、Funcation类型类型扩展、Boolean原生类型及其扩展、Number原生类型、Number原生类型的扩展、Date原生类型、Date对象->字符串、字符串->Date对象、修改和获取Date对象属性、Date原生类型的扩展、String原生类型的扩展、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

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