jQuery原始碼分析（一）

(function
(window,undefined)
)(window)

jquery整體的內部實現都包含在乙個立即執行函式形成的閉包裡，只向外暴露jquery和$兩個變數，避免了全域性變數的汙染。

平時我們例項化jquery物件的時候，並不是像例項化普通物件一樣，使用new來例項化，而是直接$(「***」)，這也是jquery的乙個亮點，jquery是如何來實現這一點的呢？

(function(window, undefined) ,
jquery.fn = jquery.prototype = 
}jquery.fn.init.prototype = jquery.fn;
})(window);

以上是建立jquery例項的核心**，主要總結下來有以下幾點：

a.在使用$(「***」)例項化jquery物件的時候，實際上呼叫jquery原型上的init方法。例項化的工作實際是init完成的。

b. jquery.fn=jquery.prototype;

b.為了讓jquery例項能夠訪問到jquery原型上的方法，jquery做了這樣的處理：jquery.fn.init.prototype = jquery.fn;

// 獲取 title 屬性的值
$('#id').attr('title');
// 設定 title 屬性的值
$('#id').attr('title','jquery');
// 獲取 css 某個屬性的值
$('#id').css('title');
// 設定 css 某個屬性的值
$('#id').css('width','200px');

jquery中通過實現方法的過載，通過傳入引數的不同，實現不同的功能，使用起來非常方便。

在jquery中使用jquery.fn.extend 與 jquery.extend用來進行jquery方法的擴充套件。

jquery.extend()用來擴充套件jquery的物件方法,也就是我們通過$.method()呼叫的方法。

jquery.fn.extend()用來擴充套件jquery的例項方法，也就是jquery例項所具有的方法。$(「***」).method();

關於這兩個方法，看原始碼後我們會發現，他們實際上是基於同乙個函式實現的。因為this的指向不同，來達到不同的功能。即：

$.extend=$.fn.extend=function
()

關於這裡的這個function所做的事情，實際上做的就是乙個物件轉殖的工作，類似object.assign()，但object.assign()只能實現淺轉殖，$.extend()可以通過設定第乙個引數為true來實現深轉殖。

jquery.extend = jquery.fn.extend = function
() , //第乙個引數
i = 1,
length = arguments.length,
deep = false; //是否深轉殖
// handle a deep copy situation
//如果都乙個引數為boolean 則為是否開啟深遞迴 target指向下乙個引數
if ( typeof target === "boolean" ) ;
i++;
}// handle case when target is a string or something (possible in deep copy)
// 如果傳入的第乙個引數是 字串或者其他
if ( typeof target !== "object" && !jquery.isfunction( target ) ) ;
}// extend jquery itself if only one argument is passed
// 如果只有乙個引數
if ( i === length ) 
for ( ; i < length; i++ ) );
if ( target === copy ) 
// recurse if we're merging plain objects or arrays
//如果深轉殖開啟且copy為物件或陣列
//這裡判斷還可以用object.prototype.tostring.call(copy) 返回"[object array]或[object object]"
if ( deep && copy && ( jquery.isplainobject( copy ) ||
( copyisarray = array.isarray( copy ) ) ) ) else ;
}// never move original objects, clone them
target[ name ] = jquery.extend( deep, clone, copy );
// don't bring in undefined values
// 淺轉殖
} else
if ( copy !== undefined ) }}
}// return the modified object
return target;
};

另乙個讓大家喜愛使用 jquery 的原因是它的鏈式呼叫，這一點的實現其實很簡單，只需要在要實現鏈式呼叫的方法的返回結果裡，返回 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 原始碼分析

這篇文章可以說是讀這篇文章這篇文章後的總結。jquery最基本的構成結構 var jquery window.jquery window.function a,b jquery.fn jquery.prototype age function jquery.fn.init.prototype jqu...

jQuery原始碼分析（一）

jQuery原始碼分析

jQuery原始碼分析

jQuery 原始碼分析

相關推薦