jquery原始碼 整體架構

2022-01-24 11:53:09 字數 2720 閱讀 7848

對外提供了jquery。

//

可以通過jquery或者$來找到jquery

(function

(window,undefined);

window.jquery=window.$=jquery;//

對外介面

})(window)

jquery本身是乙個建構函式,包括了很多靜態方法(工具方法)和例項方法。靜態方法更底層。

function jquery(){} //

jquery是乙個建構函式

//jquery原型裡的方法,也就是例項方法

jquery.fn =jquery.prototype=, //

*擴充套件其他例項化物件方法的核心方法

ready: function

(){},

ajaxstart:

function

(){},

ajaxstop:

function

(){},

ajaxcomplete:

function

(){},

ajaxerror:

function

(){},

ajaxsuccess:

function

(){}

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

//jquery靜態方法,也就是工具方法

jquery.extend= function

(){};

jquery.init= function

(){};

...//

extend方法,用來擴充套件jquery,或jquery.fn

jquery.extend = jquery.fn.extend = function

() ;

$('#casper')跟new $('#casper')是一樣的。個人覺得這裡設計的原因,乙個減少寫一堆new的麻煩,同時也可以避免開發者不小心遺漏了new導致的詭異bug。當然,不好的地方是,**有點繞,這也算是jquery原始碼的其中乙個特點。

沒什麼好講,jquery.prototype為jquery的原型方法,這裡用jquery.fn來代替jquery.prototype,只是為了少寫幾個字元,平常寫外掛程式時就是在這上做修改

很好很繞的乙個語句,上面說了$(』#casper『)返回的其實是個jquery.fn.init物件。所以,這裡的作用,是讓jquery.fn上的方法都成為jquery.fn.init物件的原型方法。 這個語句應該讓很多剛接觸jquery原始碼的人感到困惑,包括我(=_=),可以試jquery.fn.init.prototype.init.prototype.init...,如果你願意可以一直寫下去。

版本:2.0.3

可以通過jquery或者$來找到jquery

(function

(window,undefined);

(96,283) 給jq物件,新增一些方法和屬性

(285,347) extend:jq的繼承方法

(349,817)jquery.extend() :擴充套件一些工具方法

(877,2856)sizzle:複雜選擇器的實現

(2880,3042)callbacks:**物件:對函式的統一管理

(3043,3183)deferred:延遲物件:對非同步的統一管理

(3184,3295)support:功能檢測

(3308,3652)data():資料快取

(3553,3797)queue() :佇列管理

(3803,4299) attr() prop() val() addclass()等:對元素屬性的操作

(5140,6057)dom操作:新增,刪除 獲取,包裝,dom篩選

(6058,6620)css():樣式的操作

(6621,7854)提交的資料和ajax() : ajax () load() getjson()

(7855,8584)animate(): 運動的方法

(8585,8792)offset() :位置和尺寸的方法

(8804,8821)jq支援模組化的模式

(8826)window.jquery=window.$=jquery;//

對外介面

})(window)

view code

一般用法如下

$("#div1").css();

$("#div1").html();

$('#div')的執行結果是個物件,通過物件呼叫方法。

原始碼中:

var 宣告乙個變數jquery函式表示式。

//

define a local copy of jquery

jquery = function

( selector, context ) ,

所以jquery本身是乙個函式。它的返回值是乙個new出來的物件。在物件上呼叫一些方法。

jq的繼承方法,後續新增的**通過extend,掛載到jq中。都寫在一起不利於**的維護和後期的擴充套件。

外掛程式的擴充套件。

參考:

jquery原始碼之整體架構分析

jquery的整體 架構簡化如下 function window,undefined jquery.fn jquery.prototype jquery.fn.init.prototype jquery.fn if typeof window object typeof window.documen...

jQuery原始碼學習(版本1 11) 整體架構

如下,首先整個 結構看上去就是乙個閉包自執行,閉包執行的好處在於閉包擁有私有的作用域,不會汙染全域性作用域,最終再將jquery作為乙個命名空間匯出到window下,這樣 管理起來非常方便,相容性好。jquery整個閉包執行,實際是執行了factory 方法,而factory 是作為引數傳進去的,因...

Flume架構與原始碼分析 整體架構

最近在學習flume原始碼,所以想寫乙份flume原始碼學習的筆記供需要的朋友一起學習參考。flume是cloudera公司開源的一款分布式 可靠地進行大量日誌資料採集 聚合和並轉移到儲存中 通過事務機制提供了可靠的訊息傳輸支援,自帶負載均衡機制來支撐水平擴充套件 並且提供了一些預設元件供直接使用。...