jQuery原始碼解讀一

2021-07-11 03:15:41 字數 1675 閱讀 7938

前言:

我為什麼要看這個原始碼,很簡單,尋找我自己寫的js框架與jquery之間的差異,取長補短,最終目標是提高js程式設計的乙個眼界,看看別人是怎麼想的,因為自己乙個人的想法往往是片面的,也為了能讓自己的主觀漸漸接近客觀事實。

雖然jquery框架能直接拿來用,但是對於偏愛研究的人來說,還是喜歡寫原生js,就好像能自己寫作業系統的人不會喜歡去用別人的作業系統,就好像賈伯斯不會甘心用別人的產品,他要自己搞他認為更好的,差不多就這麼個道理。當然,考慮到效率,我自然也會用js 寫適合自己的框架,光會用jquery是滿足不了我的,比如我隨便想到乙個有點創意的頁面外掛程式,如果不懂js,那麼我是很難實現的。

jquery版本:隨便乙個版本,既然是個js框架,那麼萬變不離其宗,再怎麼公升級無非就是刪刪減減、增增添添、改點架構,總框架和一些基本的**是不會變的,就拿現在的 

jquery-2.2.2.js 為例分析。lets get started...

一、jquery**有多少行

二、jquery是如何工作的(總體框架,加精)

1、首先我們要知道,js**是什麼時候執行的,很簡單,當頁面從上到下載入到js檔案或**時就會執行一次。

當在 head 標籤中引入jquery ,如下所示

頁面載入到這裡時瀏覽器的js主線程就會首先進入這個檔案執行裡面的js**

執行完畢才會繼續載入下面的標籤比如 body 標籤,這點毋庸置疑

2、既然瀏覽器的js主線程在這裡執行了一次jquery**,那要看看它都幹了些什麼事情,進入 jquery-2.2.2.js 看到這樣的結構的**

(function( global, factory ) (this,function()));

這個結構再簡化一下

(function(){}(此括號裡面的內容是傳入前面function的引數));     //這是個自執行函式,下面舉例子

(function(a,b)(1,2));   //輸出3

(function(a,b)(1,function(c))); //輸出1,這也是仿jq的構造

看到這裡,也就是說,這個包含幾千行的function會自動執行裡面的內容

3、自執行函式  (function(a,b)(1,2));

普通函式執行   function fun(a,b)  fun(1,2);

4、下面就要重點看這個包含幾乎所有**的function,如下是我的總結

function()

不斷擴充套件 jquery 的屬性和功能方法,絕大多數**做這個事情

最後 return jquery

}幾千行**順利結束

也就是說jquery檔案執行完之後返回乙個jquery 物件,這意味著後面自己寫的js檔案,就可以通過它呼叫它的一些方法或屬性

5、$ 美元符號是啥,很簡單,jquery-2.2.2.js檔案 倒數幾行就會看見這樣一句**

if ( !noglobal )

命令看一下,因此如果在linux中直接引入jquery就很容易出問題,強烈建議在linux中使用jquery把 $ 符號換掉。

三、結合具體jquery**詳細分析jquery執行流程

jquery就是js,只是把幾千行js**命名為jquery,建立的主要物件也命名為jquery,檔名也命名為jquery,命名的東西不用在意,看它的執行實質,也就是看執行了哪些js**

這個需要慢慢更新,一邊看jquery 呼叫一邊分析原始碼,今天先到這裡

jquery原始碼解讀學習(一)

1.function global,factory use strict 嚴格模式if typeof module object typeof module.exports object return factory w else typeof window undefined window thi...

jquery原始碼解讀1

function global,factory returnfactory w else pass this if window is not defined yet typeofwindow undefined window this,function window,noglobal 其中形參gl...

jquery原始碼解讀之callbacks篇

callbacks模組通過維護乙個 函式列表,來實現對 函式地管理。其操作包括增加,觸發,移除,清空,禁用,鎖定等,是jquery.defrred,jquery.ajax,jquery.ready等依賴的底層模組。let cblist callbacks once memory let fn arg...