jquery源碼解析平常

介紹：JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,作得更多)。
jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可使開發更加便捷，例如操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能。除此之外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。

1.$.each函數 原生js實現　

 var gt={
        each:function (object,callback)
        {
            var type=(function () {
               //分爲不一樣的幾個類型
                switch (object.constructor){
                    case Object:
                        return 'Object';
                        break;
                    case Array:
                        return 'Array';
                        break;
                    case NodeList:
                        return 'NodeList';
                        break;
                    case HTMLCollection:
                        return 'HTMLCollection'
                    default:
                        return 'null';
                        break;
                }
            })()
            //爲數組或者類數組 的狀況下
            if(type==="Array" || type==='NodeList' || type==='HTMLCollection'){
                //因爲存在類數組的nodelist和HTMLCollection，因此不能直接調用every方法
                //every() 方法用於檢測數組全部元素是否都符合指定條件（使用指定函數檢測數組中的全部元素）。
                //若是數組中檢測到有一個元素不知足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測，當且僅當全部元素都知足條件，則返回 true。
                //注意： every() 不會對空數組進行檢測，不會改變原始數組。
                //用法 array.every(function(currentValue,index,arr), thisValue)
                /*
                * function(currentValue, index,arr)	必須。函數，數組中的每一個元素都會執行這個函數
                        函數參數:
                        參數	描述
                        currentValue	必須。當前元素的值
                        index	可選。當前元素的索引值
                        arr	可選。當前元素屬於的數組對象
                        thisValue	可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。
                        若是省略了 thisValue ，"this" 的值爲 "undefined"
                */
                [].every.call(object,function (v,i) {
                    return callback.call(v,i,v) === false?false:true;
                })
            //爲對象的狀況下
            }else if(type==="Object"){
                for(var i in object){
                    if(callback.call(object[i],i,object[i])===false){
                        break;
                    }
                }
            }
        }
    }            

　　調用執行

   //數組調用
    gt.each([1,2,3,4],function (i, v) {
        console.log(v)
    })
    //對象調用
    gt.each([{name:"GT",age:10},{name:"Alice",age:11},{name:"Mike",age:12},{name:"Joe",age:13}],function (i, v) {
        console.log(v.name +'今天'+v.age+'歲了')
    })
    //元素集調用  兩種元素集類型
    var ele=document.getElementsByClassName('eachListLi')  //HTMLCollection
    var ele2= document.querySelectorAll('.eachListLi'); //NodeList
    gt.each(ele,function (i, v) {
        console.log(v)
    })
    gt.each(ele2,function (i, v) {
        console.log(i+'：'+v)
    })

　  執行結果：

　　    對於兩個js方法的解釋：

　　　　(1) 　　every方法 　　若是數組中檢測到有一個元素不知足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測 當且僅當 全部元素都知足條件的時候 返回true

　　　

　　　　(2)　　call方法　　　　

　　　　call 和 apply 兩個方法的第一個實參 是要調用函數的母對象 ，他是調用上下文 ，在函數提內經過this的來獲取對他的引用。要想以對象 o的方法 來調用函數f()，能夠這樣使用call 和apply

　　f.call(o)
    f.apply(o)
    //上面兩個實現功能和下面的相似  假設o對象中不存在m方法
    o.m=f;//將f存儲爲o的臨時方法
    o.m();//執行方法 不傳參數
    delete o.m //刪除臨時方法

　　在es5嚴格模式中，call 和apply 的第一個實參會變成this的值，哪怕傳入的實參的原始值是null 或者undefined ，在非嚴格模式中，傳入的null和undefined 會被全局對象代替 ，而其餘原始值則會被相應的包裝對象代替

　　call 、bind 、 apply 這三個函數的第一個參數都是 this 的指向對象，第二個參數差異以下：

　　call 的參數是直接放進去的，第二第三第 n 個參數全都用逗號分隔，直接放到後面 function.call(obj1,參數1, ... ,參數n )

　　apply 的全部參數都必須放在一個數組裏面傳進去 function.apply(obj1,[參數1, ..., 參數n])

　　bind 除了返回是函數之外，它的參數形式和 call 同樣。

固然，三者的參數不限定是 string 類型，容許是各類類型，包括函數 、 object 等等！

在看 jq是如何實現的

 //jq定義的each方法 
        each: function( obj, callback ) {
            var length, i = 0;
            //分爲兩個數組類型 和對象類型 分別執行方法
            //類數組類型
            if ( isArrayLike( obj ) ) {
                length = obj.length;
                for ( ; i < length; i++ ) {
                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                        break;
                    }
                }
            } else {
                //對象類型
                for ( i in obj ) {
                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                        break;
                    }
                }
            }

            return obj;
        },

　　檢驗是否爲類數組的方法

 //類數組
    function isArrayLike( obj ) {

        // Support: real iOS 8.2 only (not reproducible in simulator)
        // `in` check used to prevent JIT error (gh-2145)
        // hasOwn isn't used here due to false negatives
        // regarding Nodelist length in IE
        //支持：僅限真正的iOS 8.2（在模擬器中不可重現）
        //`in`檢查用於防止JIT錯誤（gh-2145）
        // 此處未使用hasOwn
        //關於IE中的Nodelist長度  這一點不知道會有什麼影響 多是爲了兼容
        var length = !!obj && "length" in obj && obj.length,
                type = toType( obj );
        //當對象 是 方法和window對象的時候 直接 返回false
        if ( isFunction( obj ) || isWindow( obj ) ) {
            return false;
        }
        //只有 1.類型爲數組 2.長度爲0 3.爲數字類型 且長度大於1  ( length - 1 ) in obj的狀況下 返回ture
        return type === "array" || length === 0 ||
                typeof length === "number" && length > 0 && ( length - 1 ) in obj;
    }

　　初步判斷類型的方法 聲明瞭兩個變量 

var class2type = {};

var toString = class2type.toString;

　toType的方法

//toType的方法  初步判斷類型的方法
    function toType( obj ) {
        //當obj爲null 是 返回null 類型字符串
        if ( obj == null ) {
            return obj + "";
        }

        // Support: Android <=2.3 only (functionish RegExp)
        //支持：Android <= 2.3（功能RegExp）
        //當爲 對象和方法的時候 取class2type對象中的toString.call( obj )   　　　　　　　　　　　　這一塊沒看懂
//或者直接返回object類型 當不爲對象 方法 null的狀況下 使用typeof 判斷後返回類型
        return typeof obj === "object" || typeof obj === "function" ?
                class2type[ toString.call( obj ) ] || "object" :
                typeof obj;
    }

　　總結 $.each的方法實現 首先要 分開類型 數組 和對象 而後 數組用for 循環 對象用 for in 循環完成  

2.元素事件列表說明注：不帶參數的函數，其參數爲可選的 fn。jQuery不支持form元素的reset事件。事件 描述 支持元素或對象blur( )                             元素失去焦點 a, input, textarea, button, select, label, map, areachange( )                       用戶改變域的內容 input, textarea, selectclick( )                             鼠標點擊某個對象 幾乎全部元素dblclick( )                        鼠標雙擊某個對象 幾乎全部元素error( )                          當加載文檔或圖像時發生某個錯誤 window, imgfocus( )                         元素得到焦點 a, input, textarea, button, select, label, map, areakeydown( )                   某個鍵盤的鍵被按下 幾乎全部元素keypress( )                   某個鍵盤的鍵被按下或按住 幾乎全部元素keyup( )                       某個鍵盤的鍵被鬆開 幾乎全部元素load( fn )                        某個頁面或圖像被完成加載 window, imgmousedown( fn )          某個鼠標按鍵被按下 幾乎全部元素mousemove( fn )           鼠標被移動 幾乎全部元素mouseout( fn )              鼠標從某元素移開 幾乎全部元素mouseover( fn )            鼠標被移到某元素之上 幾乎全部元素mouseup( fn )              某個鼠標按鍵被鬆開 幾乎全部元素resize( fn )                  窗口或框架被調整尺寸 window, iframe, framescroll( fn )                      滾動文檔的可視部分時 windowselect( )                      文本被選定 document, input, textareasubmit( )                    提交按鈕被點擊 formunload( fn )                    用戶退出頁面 window