jQuery 原始碼分析

2021-09-14 04:34:00 字數 1309 閱讀 2952

這篇文章可以說是讀這篇文章這篇文章後的總結。

jquery最基本的構成結構:

var jquery = window.jquery = window.$ = function(a,b);

jquery.fn = jquery.prototype = ,

age: function ()

};jquery.fn.init.prototype = jquery.fn; // 3

jquery.extend = jquery.fn.extend = function ()

這是jquery原始碼乙個最基本的概要實現,但從這個實現中已經能弄並學到很多東西了。

( 1 ) 首先$也就是jquery本身是乙個函式, 但它又不是乙個普通的建構函式,這從$('div')的這種例項直接產生不需要new就可以知道,也就是它隱藏了例項new的過程,jquery自身只是乙個工廠函式,它產出由它的原型上定義的init方法的例項,因為擁有了new的過程,所以例項化中的this都是指向了 最終產生的例項本身,於是這樣便實現了無new構建

( 2 ) 這裡在init函式中有乙個return this;的操作,一般建構函式不會這樣寫,但這樣寫並不會影響 new 的結果,這參照之前new 的分解,便可以推出結果的一致( 只是返回了不同但值相同的變數 )。而jquery之所以在這裡要返回this是有用處的,這樣最開始例項的this便得以儲存,$('div').ready()這樣的鏈式呼叫便能得到前方的例項物件,也就是說就是return this;實現了鏈式呼叫。

( 3 ) 那既然是原型上的init構造器方法構建的例項,又怎麼能獲取到jquery的原型方法呢,這就需要將 init 方法的原型用jquery的原型物件覆蓋。也就是 3 部分的操作。

( 4 ) 最後$.extend$.fn.extend之所以會不一樣,只是呼叫時分別是jquery物件或jquery.prototype(jquery.prototype = jquery.fn)導致了this的不同,實際定義是是用的同乙個函式。

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...

jquery原始碼分析2

jquery原始碼分析系列2 results is for internal usage only 只是為了內部使用 makearray function arr,results else return ret 很多地方都使用了這個函式 判斷是否是陣列或者是類陣列 返回值是boolean funct...