jQuery源碼分析1-jQuery對象的初始化

qiangdada 發布于2019-08-21 11:24 / 1297人閱讀

摘要：那么為什么要在參數列表中增加呢這樣做也有兩個目的因為有些低版本的瀏覽器中是可以被重新賦值的，在自調用匿名函數的作用域內，確保是真的未定義。

1、命名空間

為什么要使用命名空間？

在一些語言中會看到有命名空間的概念，可在js中并沒有，但是可以通過閉包來實現。在js閉包中定義的變量會被保存到一個作用域且不會污染全局變量，在程序運行完之后也不會被銷毀。

我們可以看到，jQuery的做法就是使用了一個匿名函數形成一個閉包,然后該匿名函數自調用，所有的代碼都在這個閉包中完成，這樣就不會對全局變量污染，但是無法在其他地方訪問該閉包內的變量，所以我們可以將window對象傳入該匿名函數，然后將jQuery對象進行暴露，并且在暴露jQuery對象時，給jQuery對象賦了一個別名 $ ，這樣就可以通過暴露的 jQuery 或者 $ 訪問閉包內的其他變量了。

(function(window,undefined){
    //code
    
    if ( typeof window === "object" && typeof window.document === "object" ) {
        window.jQuery = window.$ = jQuery;
    }
})(window);

我們可以看到在這個匿名函數自調用時，傳入了window對象，這樣做不僅是為了暴露接口，還有兩個原因：

使得window由全局變量變為局部變量，當在jQuery代碼塊中訪問window對象時，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問window。

將window作為參數傳入，可以在壓縮代碼時進行優化。

那么為什么要在參數列表中增加undefined呢？這樣做也有兩個目的：

1、因為有些低版本的瀏覽器中Undefined是可以被重新賦值的，在自調用匿名函數的作用域內，確保undefined是真的未定義。因為undefined能夠被重寫，賦予新的值。

undefined = "now it"s defined";
alert( undefined );
//我們會發現在有些低版本的瀏覽器會彈出 "now it"s defined" 的字符串

2、在jquery經常要判斷一個值是否為undefined，在壓縮時將undefinde壓縮一字母u，這樣可以節省大量的空間。

2、一些變量的申明

 _jQuery = window.jQuery
    _$ = window.$

在申明變量時，jQuery先將window對象下的jQuery和$存儲到臨時變量_jQuery和_$中，這是為了防止命名沖突，防止在導入其他庫的時候命名出現重復導致一個庫無法被調用，比如prototype也使用 $ 作為接口的。

class2type = {},
core_deletedIds = [],
core_version = "2.0.3",
core_concat = core_deletedIds.concat,
core_push = core_deletedIds.push,
core_slice = core_deletedIds.slice,
core_indexOf = core_deletedIds.indexOf,
core_toString = class2type.toString,
core_hasOwn = class2type.hasOwnProperty,
core_trim = core_version.trim,

class2type、core_deletedIds、core_version就代表三種變量類型，對象、數組、字符串。然后將這三種變量類型常用的方法進行存儲，再利用call和apply進行方法的借用。
另一方面，調用實例arr的方法concat時，首先需要辨別當前實例arr的類型是Array，在內存空間中尋找Array的concat內存入口，把當前對象arr的指針和其他參數壓入棧，跳轉到concat地址開始執行。當保存了concat方法的入口core_concat時，完全就可以省去前面兩個步驟，從而提升一些性能。

后面還申明了一些正則表達式，在后面用到的時候再一一講解，正則表達式真是一個讓人懵逼的東西。

3、嚴格模式

//"use strict";

開頭有一句"use strict",表示使用js的嚴格模式。

因為這是ES5中新增的內容，所以低版本的瀏覽器不兼容，低版本的jq默認是不執行嚴格模式的。高版本的jq中默認是執行嚴格模式的。

在查看jq源碼時，注釋中的有些括號里有#符號開頭的字符，例如(#13335)。
這是對jq版本升級后一些bug的說明，可以在jq官網查看

4、初始化一個jQuery對象

jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
}

可以看到jQuery對象其實相當于一個對jQuery.fn.init對象進行實例化的工廠，每次調用jQuery時，就返回了一個init對象的實例，這樣就實現了免new調用jQuery對象。

那么這個jQuery.fn.init到底是一個什么東西呢？

jQuery.fn = jQuery.prototype = {  //96行
    init: function(selector, context, rootjQuery) {}
｝
jQuery.fn.init.prototype = jQuery.fn;  //283行

可以看到jQuery.fn 就是jQuery對象的原型，然后讓jQuery.fn.init.prototype = jQuery.fn，這樣就相當于讓init繼承了jQuery對象上的方法。所以調用jQuery時，返回的init的實例就相當于繼承了jQuery原型上的所有方法，我靠，怎么能這么繞。

但是為什么在調用jQuery時不直接返回一個jQuery對象，還要先返回init的實例，然后讓init來繼承jQuery的方法呢（我為什么要問這么白癡的問題）？

首先，如果讓jQuery返回jQuery的話這樣就會形成一個死循環，其次如果返回init實例，init又是jQuery原型下的一個方法，init中的this就是jQuery對象，這樣就能輕松的實現鏈式調用，只要在每個方法中返回this，也就是返回了jQuery對象。

剛開始總會有瑕疵，慢慢加油（我不是雞湯，認真臉）。

感興趣的話可以看看我的github，不妨給個star。

GPU云服務器云服務器 java 初始化對象對象jquery 轉jquery對象 Jquery對象數組

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

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

jQuery源碼分析2-JQ對象添加一些方法和屬性

摘要：節點修改對象的屬性，這就相當于把對象轉成了一個類數組，最后返回，可用于鏈式調用。如果傳入的是單標簽，且第二個參數是一個純對象例如則把后面對象的屬性一一添加到創建的這個節點的屬性上。我們先看看jQuery的原型中初始化了哪些屬性和方法： jQuery.fn = jQuery.prototype = { jquery: core_version, //jquery版本號 ...

TANKING 2019-08-21 11:26 評論0 收藏0
jQuery源碼解析之$().animate()（上）

摘要：前言需要先看源碼解析之和一舉例的寬度先變成，再變成，最后變成這是在異步調用中，進行同步調用動畫是異步的就是連續調用二作用通過樣式將元素從一個狀態改變為另一個狀態源碼之前有說過是的方法源碼行是否是空對象，方法執行單個動畫的封裝的本質是執行 showImg(https://segmentfault.com/img/remote/1460000019594521); 前言：需要先看 jQue...

Batkid 2019-08-23 18:20 評論0 收藏0
FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

摘要：根據項目選型決定是否開啟。為了壓縮，可維護為了支持從而使用代替變量存儲防沖突會用到，形如版本號聲明最終調用的是這個原型實際上。功能檢測統一兼容性問題。概覽 (function (){ (21 , 94) 定義了一些變量和函數 jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

Lin_R 2019-08-23 10:29 評論0 收藏0
FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

摘要：根據項目選型決定是否開啟。為了壓縮，可維護為了支持從而使用代替變量存儲防沖突會用到，形如版本號聲明最終調用的是這個原型實際上。功能檢測統一兼容性問題。概覽 (function (){ (21 , 94) 定義了一些變量和函數 jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

褰辯話 2019-08-02 11:03 評論0 收藏0