javascript讀書隨筆 1

標籤：

1.1 jQuery 的 noConflict 

 

 1 var _jQuery=window.jQuery  //window.jQuery可能是別的庫的變數名，先用jQuery對象中的臨時變數存下來---var _jQuery 2 _$=window.$  //同上 3 jQuery.extend({ 4     noConflict:function(deep){ 5         window.$=_$; 6         if(deep){    //如果jQuery是需要深度讓出全域變數名時，將noConflict函數傳入一個參數，只要參數顯示為true就將全域jQuery也放棄 7             window.jQuery=_jQuery;  //給回原先的佔有該變數的值 8             return jQuery 9         }10     }11 })

 

 

 

 

1.2 對象擴充

 

 1 function mix(target,source){ 2     var args=[].slice.call(arguments),  //將類數組對象argument轉換成數組 3     i=1,key, 4     ride=typeof args[args.length-1] =="boolean" ?args.pop():true;  //typeof 首先判斷它是否為boolean類型，如果是就將最後一個參數返回，如果不是就返回true，預設為覆蓋同名參數 5     if(args.length===1){   //上一步已經將是否覆蓋同名布爾參數去除，如果剩下的只有一個參數時 6        target= !this.window ? this : {}; //如果現在是在全域範圍下，就返回this---window對象；如果不是就返回一個Null 物件以接下來接受剩餘一個參數的屬性 7        i=0; 8     } 9     while((source=args[i++])){  //將剩下的參數一個一個屬性複製給target10        for(key in source){11           if(ride||!(key in target)){12               target[key]=source[key];13             }14         }15     }16     return target;17 }

 

1.3數組化

在瀏覽器中存在許多類數組對象 function.arguments,doucument.forms,form.elements,doucument.links等，有些庫都存在一些數組化的函數

 1 var makeArray =function(array){ 2     var ret =[];    3     if(array!=null){   4        var i =array.length;  //擷取array中的length屬性，如果length屬性為空白，說明它不是類數組 5        //window,String,function都有length屬性，String為字串長度，function為預設參數個數；array.setInterval判斷是否array為window對象，雖然這不是最佳方式。 6        if(i==null ||typeof array=== "string" || jQuery.isFunction(array)||array.setInterval)   7            ret[0]=array; //保證發揮的是數組 8        else  9            while(i)10                ret[--i]=array[i];11     }12     return ret;13 }

1.4 類型判斷

jQuery的type函數，通常判定一個函數類型的時候都運用toString函數

 1 class2type{} 2 //將有可能的幾種除了對象的類型放入一個class2type的對象中 3 jQuery.each("Boolean Number String Function Array Date RegExpObject".split(" "),  4 function(i,name){ 5     class2type["[object"+name+"]"] = name.toLowerCase(); 6 }); 7 jQuery.type=function(obj){ 8     return obj==null?  //如果obj==null 因為NULL沒有tostring方法，所以就直接調用String函數， 9     String(obj) :10     class2type[toString.call(obj)]|| "object";//如果調用tostring 為上面所寫的對象屬性返回相應的值，否則認為為objec11 }

1.5 domReady實現

    window.ready=fn,這條語句是當所有資源已經完成，開始執行fn函數。

    在jQuery中運用$.(fn)可以多次使用，都會依次執行，且是當dom樹構建完成時。

    判斷dom樹是否完成可以有四種方法

         （1）W3C中有一個DOMContentLoaded事件，監聽這個函數執行函數，現在有許多瀏覽器都支援

         （2）對於ie可以用Diego Perini的hack

 1 (function (){ 2     try{ 3        document.documentElement.doScroll(‘left‘);//如果報錯，說明還未執行完畢 4     }  5     catch (e){ 6        setTimeout(arguments.callee,50);//50毫秒後重新執行函數 7        return; 8     } 9     fireReady(); //要執行的函數10 })();

         （3）對於ie還可以用script defer hack進行判定，但這不推薦，要加多有的script

1 document.write("<script id=_ie_onload defer src=//0><\/scr"+"ipt>");2 script=document.getElementById("_ie_onload");3 script.onreadystatechange=function(){ //ie即使是死鏈也能觸發事件4     if(this.readyState=="complete"){5         fireready();//指定defer的script會在DOM樹建完才觸發6     }7 }

        （4）對於在firefox3.6之前可以用 判斷document.documentElement是否為true來觸發，和上面第二方法類似，不為true繼續用setTimeout來迴圈調用判斷

 

javascript讀書隨筆 1