Microsoft Ajax Library 對javascript原生類型的擴充

什麼是Microsoft Ajax Library?
    ·asp.net ajax 的用戶端部分
    ·純用戶端架構（獨立於伺服器端的）
    ·提供了js擴充和基礎類庫

Javascript中常用的原生類型：
    ·Object
    ·Arrary
    ·Error
    ·Function
    ·。。。。。

Object原生類型
    ·一個無序的集合，可以存放任意的類型對象
    ·常作為字典使用，取值賦值使用 obj["itemname"] 或者 obj.itemname 其中key是字串類型 value是任意類型
     並且可以用for-in遍曆字典中的每個項
    ·禁止擴充object的prototype對象，因為如果擴充了object的prototype對象，其擴充將會出現在所有的對象中，影
     響for操作結果（Microsoft Ajax Library沒有擴充object）
    
    【code demo】：
     var obj = new Object();   
     obj["name"] = "dongde";
     obj.salary = 10000;
     alert( obj["name"]+"的工資："+obj.salary );
    
    【code demo】：
     var dict = new Object();
     for (var i = 0; i < 10; i++)
     {
         var key = "key_" + i;
         dict[key] = Math.random();
     }
  
     delete dict["key_8"];
  
     for (var key in dict)
     {
         alert("Key: " + key + ", Value + " + dict[key]);
     }
    
 

Array原生類型
     ·長度可變的數組對象，最大長度2^32-1
     ·建立Arrary
               new Array();  
               new Array(3);    
               new Array(9,"dongde");
      ·常用方法：
                concat  返回一個新數組，儲存了原數組所有的元素和所有的參數
                push 在數組尾添加一個或多個元素
                pop   從數組尾去除並返回元素
                shift  從數組頭去除並返回元素
                unshift   在數組頭添加一個或者多個元素
                join(sepatator)   返回以sepatator為分隔字元的連結所有元素的字串
                reverse   逆轉數組
                sort(compareFunction)  比較兩個元素， 可用於數字和字串元素的排序 ，其他類型需要提供compareFunction參數
                slice（start，end）返回新的數組，包括從下標start到end ，如果沒有end表示返回從start到結尾的所有元素的一個新
                                           數組， 如果start在end前或相同將返回空數組， 如果end參數為負數表示倒數第幾個下標結束

                splice    splice(2,1)  刪除元素（從下標為2開始刪除一個元素）
                           splice(2.0,"aaa","bbb") 插入元素 （從下標2插入）
                           splice(2,1,"aaa","bbb") 替換元素 

        ·Array原生類型的擴充
                 Array.enqueue(array,item);  入隊列，將item添加至array尾
                 Array.dequeue(array);         出隊列，刪除並返回array的第一個元素
                 Array.addRange(array,items);  將items數組中的左右元素添加至array尾
                 Array.contains(array,item);   是否存在某個元素，存在返回true，否側返回false
                 Array.clear(array); 清除array中的所有元素
                 Array.insert(array,index,item);  
                 Array.remove(array,item); 移除item元素
                 Array.removeAt(array,index);
                 Array.clone(array);  返回一個和array相同的新數組
                 Array.parse(value);
                 Array.indexOf(array,item,start);  從start開始尋找item元素，返回item的下標，如果沒有item元素返回-1
                 Array.add(array,item);  和 Array.enqueue(array,item)效果一樣
                 Array.forEach(array,method,instance);

Error原生類型
        ·表示錯誤對象

 

Function原生類型
       

·每個方法均為Function類型的執行個體
          typeof(Array) = typeof(Function) = "function"
        ·方法調用時根據發起的對象來確定this上下文
        ·Function.call(instance,[arg1[,arg2[,...]]]) 和 Function.apply(instance,args)
    每個Function都有兩個方法call和apply ，instance作為方法調用時this的上下文引用
    apply方法中的 args表示當調用時 args中的所有的元素依次傳入
    call方法中的 [arg1[,arg2[,...]]] 傳入的對象依次寫出就可以了

          【code demo】：
          
          function Show(content)
          {
   
             document.getElementById("divid").innerHTML += (content + "<br />");
          }

           function testMethod()
           {
              var result = this.toString();
              for( var i=0;i < arguments.length;i++ )
              {
                    result += (", " + arguments[i]);
      
              }
              return result;
           }

           var Mary = new String("My name is Mary");
           var Lin = new String("My name is Lin");
           Mary.testMethod = testMethod;
           Lin.testMethod = testMethod;

           show(testMethod());     //輸出[object]
           show(Mary.testMethod());   //輸出 My name is Mary  this指標指向Mary
           show(Lin.testMethod());    //輸出 My name is Lin  this指標指向Lin

           show("Mary.aMethod.call(b, 1, 2, 3): " + Mary.aMethod.call(Lin, 1, 2, 3));  //輸出 My name is Lin，1，2，3   this指標指向Lin
           show("Lin.aMethod.apply(a, [1, 2, 3]): " + Lin.aMethod.apply(Mary, [1, 2, 3]));  //輸出 My name is Mary，1，2，3  this指標指向Mary

           var CC = new String("My name is CC");
           show("Mary.aMethod.call(CC, 1, 2, 3): " + Mary.aMethod.call(CC, 1, 2, 3));  //輸出 My name is CC，1，2，3   this指標指向CC

        
         ·Function原生類型擴充

                 Function.createDelegate（instance,method); 得到一個方法的引用，執行他側會調用method方法，而且method的上下文this指向instance

                 Function.createCallback (method,context);   得到一個方法引用，執行他側會調用method方法，並將context作為額外參數傳入

               【code demo】：

                <asp:ScriptManager ID="ScriptManager1" runat="server" />
                <input type="button" value="Click Me" id="btn" />

                <script language="javascript" type="text/javascript">
      
                  var oo = {
             
                        textContext : "dongde",
                        onClick : function(e)
                        {
                               alert("你好："+this.textContext);
                        }     
      
                       }
                   oo.onClick();

                 </script>

                //輸出   你好：dongde

 

                 <asp:ScriptManager ID="ScriptManager1" runat="server" />
                 <input type="button" value="Click Me" id="btn" />

                 <script language="javascript" type="text/javascript">
      
                 var oo = {
             
                       textContext : "dongde",
                       onClick : function(e)
                       {
                            alert("你好："+this.textContext);
                       }      
       
                      }

                 $addHandler($get("btn"), "click", oo.onClick);   //Microsoft Ajax Library擴充方法，跨瀏覽器添加dom元素的事件

                 </script>

                 // 輸出undefined

 

     <asp:ScriptManager ID="ScriptManager1" runat="server" />
     <input type="button" value="Click Me" id="btn" />

     <script language="javascript" type="text/javascript">
      
       var oo = {
             
       textContext : "dongde",
       onClick : function(e)
       {
          alert("你好："+this.textContext);
       }     
      
       }

              // $addHandler($get("btn"), "click", oo.onClick);   //Microsoft Ajax Library擴充方法，跨瀏覽器添加dom元素的事件

       var onClickDelegate = Function.createDelegate(oo, oo.onClick);
    
              $addHandler($get("btn"), "click", onClickDelegate);

     </script>

             //輸出   你好：dongde

 

            <asp:ScriptManager ID="ScriptManager1" runat="server" />
     <input type="button" value="Click Me" id="btn" />

     <script language="javascript" type="text/javascript">
      
       var oo = {
             
       textContext : "dongde",
       onClick : function(e,arg)
       {
          alert("你好："+this.textContext+" "+ arg);
       }     
      
       }

              // $addHandler($get("btn"), "click", oo.onClick);   //Microsoft Ajax Library擴充方法，跨瀏覽器添加dom元素的事件

       // var onClickDelegate = Function.createDelegate(oo, oo.onClick);

       var onClickDelegate = Function.createCallback(
    Function.createDelegate(oo, oo.onClick), "wish you success");
    
              $addHandler($get("btn"), "click", onClickDelegate);

     </script>

     //輸出   你好：dongde wish you success