一直在使用jQuery蛇数，也一直想更深層次的學(xué)習(xí)jQuery挪钓，下面就從jQuery的結(jié)構(gòu)說(shuō)起。并通過一個(gè)小例子耳舅，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的選擇器獲取文本內(nèi)容的功能碌上。
- 在jQuery源碼，你會(huì)看到下面的結(jié)構(gòu):
(function(window,undefined){
var jQuery = ;
window.jQuery = $.jQuery = jQuery;
})(window);
這個(gè)結(jié)構(gòu)代表創(chuàng)建一個(gè)匿名函數(shù)并且立即執(zhí)行浦徊。通過這個(gè)匿名函數(shù)馏予，創(chuàng)建了一個(gè)“私有”的命名空間，可以防止變量沖突污染盔性。
由于undefined可以被重寫霞丧，被修改為其他的值，因此將undefined作為參數(shù)傳入冕香，可以保證undefined確實(shí)是未定義蛹尝。
- jQuery對(duì)象構(gòu)造函數(shù)
//構(gòu)造jQuery對(duì)象
var jQuery = function(selector,context){
return new jQuery.fn.init(selector,context,rootjQuery);
}
jQuery對(duì)象不是通過 new jQuery 創(chuàng)建的，而是通過 new jQuery.fn.init 創(chuàng)建的悉尾。定義了jQuery對(duì)象突那，實(shí)際就是一個(gè)函數(shù)，這個(gè)函數(shù)返回的是new jQuery.fn.init( selector, context, rootjQuery );构眯，所以jQuery對(duì)象就是*** jQuery.fn.init*** 實(shí)例愕难。
- jQuery原型
jQuery的原型就是jQuery.fn，所以在fn上添加的方法可以在任何jQuery對(duì)象中直接調(diào)用惫霸。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
這里會(huì)有點(diǎn)繞猫缭，我也是參考了別人的網(wǎng)站上寫的。
所有掛載到j(luò)Query.fn的方法壹店，相當(dāng)于掛載到了jQuery.prototype猜丹，
即掛載到了jQuery 函數(shù)上（一開始的 jQuery = function( selector, context ) ），
但是最后都相當(dāng)于掛載到了jQuery.fn.init.prototype硅卢，
即相當(dāng)于掛載到了一開始的jQuery 函數(shù)返回的對(duì)象上射窒，即掛載到了我們最終使用的jQuery對(duì)象上妖混。
- 下面我們就來(lái)看jQuery.fn.init
jQuery.fn.init的功能是對(duì)傳進(jìn)來(lái)的selector參數(shù)進(jìn)行分析，進(jìn)行各種不同的處理轮洋，然后生成jQuery對(duì)象。
這個(gè)init函數(shù)就是原型抬旺，jQuery函數(shù)構(gòu)造函數(shù)弊予。
這個(gè)函數(shù)接收三個(gè)參數(shù)，分別是選擇器开财，上下文和root汉柒，
這個(gè)root在return new jQuery.fn.init( selector, context, rootjQuery );已經(jīng)定死了，
就是rootjQuery 就是 document對(duì)象,
所以實(shí)際上只有兩個(gè)參數(shù)可用责鳍，就是selector和context碾褂。
pic1.png
根據(jù)selector和context參數(shù)的不同，分情況處理历葛，依次處理了如下幾種情況
1, selector為空正塌，則直接返回空的jquery對(duì)象
2，如果selector是字符串恤溶，分如下幾種情況
2.1, selector是 '<xxx>'類型的乓诽，則直接創(chuàng)建html片段，
同時(shí)如果context是plainObject則把其中的屬性全部賦值給創(chuàng)建出來(lái)的html片段
2.2,如果selector是一個(gè)id選擇器咒程，則直接調(diào)用getElementById來(lái)選擇元素
2.3, 如果context為空鸠天，調(diào)用rootjQuery.find(selector),
如果context是jquery對(duì)象，則直接調(diào)用context.find(selector)
2.4帐姻，到這里稠集，說(shuō)明context也是一個(gè)選擇器，則直接調(diào)用$(context).find(selector)
3, 如果selector是一個(gè)DOMElement，則直接使用，不用去找了
4, 如果selector是一個(gè)函數(shù)头朱，則在documentready時(shí)調(diào)用此函數(shù)
5卓囚，兼容另一種寫法，即直接傳一個(gè)對(duì)象 {selector:xxx, context:xxx}
到此基本的知識(shí)點(diǎn)就講到這里败匹，我們來(lái)看jQuery源碼的結(jié)構(gòu)
(function( window, undefined) {
var jQuery = (function() {
// 構(gòu)建jQuery對(duì)象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// jQuery對(duì)象原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function ( selector, context, rootjQuery ) {
}
};
// 合并內(nèi)容到第一個(gè)參數(shù)中，后續(xù)大部分功能都通過該函數(shù)擴(kuò)展
// 通過jQuery.fn.extend擴(kuò)展的函數(shù)，大部分都會(huì)調(diào)用通過jQuery.extend擴(kuò)展的同名函數(shù)
jQuery.extend = jQuery.fn.extend = **function**() {};
// 在jQuery上擴(kuò)展靜態(tài)方法
jQuery.extend({
});
// 到這里鳖宾，jQuery對(duì)象構(gòu)造完成，后邊的代碼都是對(duì)jQuery或jQuery對(duì)象的擴(kuò)展
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
下面是模擬jQuery實(shí)現(xiàn)簡(jiǎn)單的獲取元素內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="testText">
測(cè)試文本
</div>
</body>
<script>
(function(window,undefined){
var rootjQuery = window.document;
var jQuery = (function(){
var jQuery = function(selector,context){
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype ={
construct: jQuery,
init: function( selector, context, rootjQuery ){
var that = this;
that.ele = null;
that.value = '';
if(selector.charAt(0) === '#'){
console.log(selector);
that.ele = document.getElementById(selector.slice(1));
}
that.getValue = function(){
that.value = that.ele ? that.ele.innerHTML : 'No value';
return that;
};
that.showValue = function(){
return that.value;
};
}
};
jQuery.fn.init.prototype = jQuery.fn;
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
//測(cè)試
var testText = $('#testText').getValue().showValue(); //
alert(testText);
</script>
</html>
這里只實(shí)現(xiàn)了根據(jù)id來(lái)查找到具體的元素逆航，其他拓展的方法鼎文，如根據(jù)類名來(lái)實(shí)現(xiàn)查找 都可以寫在init函數(shù)中。
