jQuery源碼解讀：部份jQuery工具方法實現

Rindia 發布于2019-08-21 10:24 / 519人閱讀

摘要：作為前端最流行的類庫，沒有之一，源碼必須得讀一讀。本博將不定期更新源碼解讀內容，如果解讀不正確的地方，還請同學們在評論中指正。這里使用的是改變的指向為實例。其實就是中常見的四判斷是否是數字函數用于檢查其參數是否是無窮大。

jQuery作為前端最流行的類庫，沒有之一，源碼必須得讀一讀。本博將不定期更新源碼解讀內容，如果解讀不正確的地方，還請同學們在評論中指正。

本系列文章基于jquery-1.9.1.js。（編者注：雖然JQ已經出到2.X，本文所述的方法是基本方法，沒有版本之差，對于學習有所幫助）

一、$.type() 判斷js數據類型

用法：$.type(new Array()); //array

部份源碼(截取關鍵部份，請忽略源碼語法)：

//生成typelist的map
class2type = {}
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//每個對象實例都有toString方法
core_toString = class2type.toString

//主方法
type: function( obj ) {
    if ( obj == null ) {
        return String( obj );
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ core_toString.call(obj) ] || "object" :
        typeof obj;
}

解讀：

1、class2type生成后的內容為

var class2type = {
    "[object Boolean]":"boolean",
    "[object Number]":"number",
    "[object String]":"string",
    "[object Function]":"function",
    "[object Array]":"array",
    "[object Date]":"date",
    "[object RegExp]":"regexp",
    "[object Object]":"object",
    "[object Error]":"error"
}

2、core_toString使用的是對象實例的toString

所有繼隨自Object的對象都有toString方法，為什么一定要使用object.toString，因為array,function雖然有toString方法，但該方法進行了重寫，array調用toString打印的數組成員用逗號隔開的字符串。這里使用的是{}.toString.call(obj);改變toString的this指向為object實例。jquery為什么使用的是class2type.toString.call，這樣就可以少聲明一個object。

var func = function(){};
var arr = [];
console.log({}.toString.call(func)); //[object Function]
console.log({}.toString.call(arr)); //[object Array]

這樣就得到class2type的鍵名，以此判斷數據類型。

二、$.each() 遍歷一個數組或對象。

each()其實還是使用的for來進行循環的，除了方便外，因其做了一下簡單的封裝，所以效率還是要比for差，對于大型循環，盡量使用for.

三、$.trim() 去除字符串兩端的空格。

rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g
core_version = "1.9.1"
//僅僅是使用字符串的trim方法
core_trim = core_version.trim

//主方法，首先嘗試使用字符串原生的trim方法（非IE支持）
//不支持的話，使用String.prototype.trim.call("uFEFFxA0")
//最后使用正則replace
trim: core_trim && !core_trim.call("uFEFFxA0") ?
    function( text ) {
        return text == null ?
            "" :
            core_trim.call( text );
    } :

    // 上述兩個方法不支持，使用自定義的方法，清空兩邊的空格或特殊字符
    function( text ) {
        return text == null ?
            "" :
            ( text + "" ).replace( rtrim, "" );
    }

該方法需要解釋的是，“uFEFF”和“xA0”。

某些軟件，在保存一個以UTF-8編碼的文件時，會在文件開始的地方插入三個不可見的字符（0xEF 0xBB 0xBF，即BOM），轉碼后是“uFEFF”，因此我們在讀取時需要自己去掉這些字符。

“xA0”其實就是HTML中常見的“ ”

四、$.isNumeric() 判斷是否是數字

isNumeric: function( obj ) {
    return !isNaN( parseFloat(obj) ) && isFinite( obj );
}

isFinite() 函數用于檢查其參數是否是無窮大。如果 number 是有限數字（或可轉換為有限數字），那么返回 true。否則，如果 number 是 NaN（非數字），或者是正、負無窮大的數，則返回 false。

五、$.isEmptyObject() 判斷對象是否為空

isEmptyObject: function( obj ) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}

這個方法很好懂，就不多解釋

六、$.parseJSON() 將JSON字符串轉換為JSON對象

// JSON RegExp
rvalidchars = /^[],:{}s]*$/,
rvalidbraces = /(?:^|:|,)(?:s*[)+/g,
rvalidescape = /(?:["/bfnrt]|u[da-fA-F]{4})/g,
rvalidtokens = /"[^"
]*"|true|false|null|-?(?:d+.|)d+(?:[eE][+-]?d+|)/g

parseJSON: function( data ) {
    // 如果有原生的JSON對象支持，使用原生對象
    if ( window.JSON && window.JSON.parse ) {
        return window.JSON.parse( data );
    }

    if ( data === null ) {
        return data;
    }

    if ( typeof data === "string" ) {

        // 去掉兩端空格,制表符,bom
        data = jQuery.trim( data );

        if ( data ) {
            // 保證輸入的字符串是可用的JSON字符串
            if ( rvalidchars.test( data.replace( rvalidescape, "@" )
                .replace( rvalidtokens, "]" )
                .replace( rvalidbraces, "")) ) {
                console.log(data);
                return ( new Function( "return " + data ) )();
            }
        }
    }

    jQuery.error( "Invalid JSON: " + data );
}

這個方法主要是看上面幾個正則表達式，從字符串轉JSON對象，僅僅是使用return ( new Function( “return ” + data ) )();

七、$.globalEval() 在全局作用域執行一段JS腳本

// 在全局作用域執行JS腳本
globalEval: function( data ) {
    if ( data && jQuery.trim( data ) ) {
        // 在IE中使用execScript
        // 因為使用匿名函數，所以作用域使用的是window
        ( window.execScript || function( data ) {
            window[ "eval" ].call( window, data );
        } )( data );
    }
}

jQuery該方法源于：Jim Driscoll

方法原理：eval作用域問題

var a = "window";
function b(){
    eval("var a = "b"");
}
b();
alert(a); //a的結果為window；IE、chrome、FF結果一致
window.eval和eval不一樣的地方：

var a = "window";
function b(){
    window.eval("var a = "b"");
}
b();
alert(a); //IE下還是a的結果還是window,chrome、FF的a的結果b

via Just Jason"s Blog

云服務器 GPU云服務器 jquery插件源碼jquery jQuery方法 jquery源碼 jquery實現滑動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85472.html

輕輕松松自己寫一個jquery庫-要不要試試？

摘要：是現在最流行的工具庫。據統計，目前全世界的網站使用它。好，說了這么多我們就看看自己寫一個庫，有沒有你想想的那么難。寫法寫法三事件的監聽四類操作的方法，用于為元素添加一個。 jQuery是現在最流行的JavaScript工具庫。據統計，目前全世界57.3%的網站使用它。也就是說，10個網站里面，有6個使用jQuery。如果只考察使用工具庫的網站，這個比例就會上升到驚人的91.7%。因此...

beita 2019-08-20 16:36 評論0 收藏0
前端基礎進階（十一）：詳細圖解jQuery對象，以及如何擴展jQuery插件

摘要：而在構造函數中，返回了的實例對象。在中直接返回過的實例，這里的是的真正構造函數最后對外暴露入口時，將字符與對等起來。因此當我們直接使用創建一個對象時，實際上是創建了一個的實例，這里的正真構造函數是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早幾年學習前端，大家都非常熱衷于研究jQuery源...

RebeccaZhong 2019-08-21 18:31 評論0 收藏0
jQuery的ready函數源碼解讀

摘要：學習有許多途徑，我們今天從的函數開始。本例中的代碼都來自于腳本庫。我們在通過函數注冊事件處理之前，完成了頁面檢測代碼的注冊。當頁面完全加載之后，我們注冊的函數就被調用了。八參考的函數是如何工作的函數實現原理如果你對$(document).ready()的理解也僅限于在DOM Tree繪制完畢后觸發，那么，你也應該好好研究下ready的工作原理，因為，TST的面試官問過我這個問題。。。...

soasme 2019-08-19 18:34 評論0 收藏0
cordova研習筆記(二) —— cordova 6.X 源碼解讀（上）

摘要：本文源碼為版本。的代碼結構也是一個很經典的定義結構構造函數實例修改函數原型共享實例方法，它提供事件通道上事件的訂閱撤消訂閱調用。前言 cordova(PhoneGap) 是一個優秀的經典的中間件框架，網上對其源代碼解讀的文章確實不多，本系列文章試著解讀一下，以便對cordova 框架的原理理解得更深入。本文源碼為cordova android版本6.1.2。源碼結構我們使用IDE...

Java_oldboy 2019-08-20 16:23 評論0 收藏0
JavaScript專題系列20篇正式完結！

摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 評論0 收藏0