逐行分析jQuery原始碼

2022-02-14 03:23:44 字數 2255 閱讀 3428

注意:本次原始碼分析選擇2.0.3(因為不支援ie6、7、8,就少了很多相容的hack的寫法,對了解jquery的實現原理有很大的幫助)

1.jquery有不同的版本,從2.x版本便不再支援ie6、7、8

將jquery拆分長框架一點一點進行了解

2.

(function ())();

這個叫匿名函式自執行

3.匿名函式自執行的好處是什麼呢?

匿名函式自執行裡面的所有東西都是乙個區域性的。防止和其他的**衝突。

栗子①(function () )();

alert(a);

控制台報錯,說a is not defined。

4.如何能夠訪問到匿名函式自執行中的方法呢?

很多種方法(⊙o⊙)哦。可以把你要對外提供的介面作為window的屬性或者是方法。

栗子②

(function

() //將abc方法作為window的方法,就可以在匿名函式自執行外面進行訪問了

window.abc=abc;

})();

abc();

但是要對外提供介面,我們才能找到使用的方法和屬性

5.在jquery中,$()是jquery()的簡寫方式。

6.在jquery檔案中第21行到第94行就是定義了一些變數和函式。

其中,60-64行是乙個特別重要的函式,就是平時用的$() jquery()對外的介面

//

define a local copy of jquery

jquery = function

( selector, context ) ,

但是現在這個jquery還是以區域性變數的形式存在,要提供對外的介面,才能使用。提供介面在第8823-8827行

//

if there is a window object, that at least has a document property,

//define jquery and $ identifiers

if ( typeof window === "object" && typeof window.document === "object")

7.在第96-283行,都是給jquery物件新增一些方法和屬性。

prototype(原型)是物件導向的東西,所以說,jquery就是乙個基於物件導向的程式,jquery裡面寫的都是跟物件導向有關的。

//96行

jquery.fn = jquery.prototype

8.為什麼jquery是乙個基於物件導向的程式??

栗子③

//jquery是這樣呼叫方法的對吧。是不是和下面陣列使用方法的方式非常像。

//但是實際上$("div")他本身是乙個函式呼叫,但是函式呼叫的執行結果是乙個物件,所以,這就是為什麼說jquery是基於物件導向的程式嘍~~~

$("div").css();

$("div").text();

//這是array物件方法的使用方式,先例項化乙個物件,然後使用物件呼叫方法。

var arr=new array(3);

arr.sort();

arr.splice();

//61--64

jquery = function

( selector, context )

9.285--347行-->  extend:是jquery當中的乙個繼承方法,希望後續新增的方法都能掛在jquery物件上,很方便擴充套件

10.

//

通過使用物件呼叫的方法,是例項方法。

$().text();

$().html();

//$是乙個函式,在函式下面來擴充套件方法的話,就是擴充套件一些靜態方法

//在jquery當中,給物件導向擴充套件靜態屬性和靜態方法叫做擴充套件工具方法

//工具方法和例項方法區別就在於,它既可以給jquery物件來用,也可以給源生的js來用,例項方法只能給jquery物件呼叫

$.trim();

$.proxy();

11.靜態方法和例項方法在jquery中的關係?

可以把靜態方法看作是在jquery中的最底層,而例項方法是上一層或者是更高層的。

很多方法都是例項方法,裡面呼叫的都是工具方法。

12.877行--2856行  sizzle 複雜選擇器的實現

13.2880行--3042行  callbacks **物件 : 函式的統一管理

HashMap原始碼分析 一 逐行分析

首先,我們要了解一下hashmap的儲存方式 既然名字包含hash,不難看出他是以hash值作為位址儲存的,更確切的講他是以雜湊桶aka鏈位址的方式儲存元素的 如果不了解什麼是雜湊桶,或者想先看一下hashmap的實現特點參見 hashmap實現特點 基於jdk文件 雜湊衝突採用的是雜湊桶,桶中元素...

jQuery原始碼分析

工具 版本說明 版本號備註 jquery 2.1.1 sublime 3jquery function selector,context jquery.fn jquery.prototype 快速匹配正則 不加g 不光匹配整體項還會匹配到子項 rquickexpr s w w w init jque...

jQuery原始碼分析

一 jquery如何做到不汙染變數名並暴露出 供使用者使用 jquery將變數和 寫進立即執行函式,通過函式來包裹所有的變數和方法,再在這個立即執行函式上將 jquery方法繫結到window上,就可以讓使用者使用到jq方法了。二 jquery是如何做到 jquery 的?function wind...