這段時(shí)間在學(xué)習(xí)研究jQuery源碼，受益于jQuery日益發(fā)展強(qiáng)大，研究jQuery的大牛越來(lái)越多，學(xué)習(xí)的資料也比前兩年好找了，有很多非常不錯(cuò)的資源，如高云的jQuery1.6.1源碼分析系列。這些教程非常細(xì)致的分析了jQuery內(nèi)部原理和實(shí)現(xiàn)方式，對(duì)學(xué)習(xí)和理解jQuery有非常大的幫助。但是個(gè)人認(rèn)為很多教程對(duì)jQuery的整體結(jié)果把握不足，本人試圖從整體來(lái)闡述一下jQuery的內(nèi)部實(shí)現(xiàn)。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括乳源網(wǎng)站建設(shè)、乳源網(wǎng)站制作、乳源網(wǎng)頁(yè)制作以及乳源網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，乳源網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到乳源省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！
大家知道，調(diào)用jQuery有兩種方式，一種是高級(jí)的實(shí)現(xiàn)，通過(guò)傳遞一個(gè)參數(shù)實(shí)現(xiàn)DOM選擇，如通過(guò)$(“h1″)選擇所有的h1元素，第二種是較為低級(jí)的實(shí)現(xiàn)，如果通過(guò)$.ajax實(shí)現(xiàn)ajax的操作。那么，這兩種方式到底有何不同？用typeof函數(shù)檢測(cè)$(‘h1′)和$.ajax,類(lèi)型分別為object和function，稍微學(xué)過(guò)jQuery的都知道或者聽(tīng)過(guò)過(guò)，前者返回的是一個(gè)jQuery對(duì)象，那么jQuery對(duì)象是什么，它和jQuery是什么關(guān)系呢？我們先來(lái)通過(guò)for(var
i
in
$(”))
document.write(i+”
:::”+$(“”)[i]+””);打印一下jQuery對(duì)象的屬性和對(duì)應(yīng)的值,可以看到它有100多個(gè)屬性，通過(guò)console輸入$(“*”)可以看到大部分屬性是繼承自jQuery原型的屬性，jQuery對(duì)象實(shí)際上是這樣一個(gè)對(duì)象:
所以我們來(lái)推測(cè)，jQuery的實(shí)現(xiàn)可能是類(lèi)似這樣的：
function
jQuery(){
this[0]="Some
DOM
Element";
this[1]="Some
DOM
Element";
this[2]="Some
DOM
Element";
this.length=3;
this.prevObject="Some
Object";
this.context="Some
Object";
this.selector="Some
selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}
這些代碼通過(guò)new操作符就就能創(chuàng)建出擁有上述屬性的jQuery對(duì)象,但是實(shí)際上我們調(diào)用jQuery創(chuàng)建jQuery對(duì)象時(shí)并沒(méi)有使用new操作符，這是如何實(shí)現(xiàn)的呢？來(lái)看jQuery的實(shí)現(xiàn):
var
jQuery
=
function(
selector,
context
)
{
//
The
jQuery
object
is
actually
just
the
init
constructor
'enhanced'
return
new
jQuery.fn.init(
selector,
context,
rootjQuery
);
}
jQuery.fn=jQuery.prototype={
jquery:
core_version,
init:function(selector,context){
//some
code
return
this;
}
//some
code
there
//......
}
jQuery.fn.init.prototype=jQuery.fn;
這里有幾點(diǎn)做得非常巧妙的地方,第一點(diǎn)是通過(guò)jQuery原型屬性的init方法來(lái)創(chuàng)建對(duì)象來(lái)達(dá)到不用new創(chuàng)建對(duì)象的目的，第二點(diǎn)是對(duì)init方法內(nèi)this指向的處理。我們知道，通過(guò)調(diào)用init返回一個(gè)jQuery的實(shí)例，那么這個(gè)實(shí)例就必須要繼承jQuery.prototype的屬性，那么init里面這個(gè)this,
就繼承jQuery.prototype的屬性。但是init里面的this，受制于作用域的限制，并不能訪問(wèn)jQuery.prototype其它的屬性，jQuery通過(guò)一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,這樣以來(lái)，init產(chǎn)生的jQuery對(duì)象就擁有了jQuery.fn的屬性。
到這里，一個(gè)jQuery的基本原型就浮出水面了。這里有兩個(gè)對(duì)象，一個(gè)是jQuery這個(gè)構(gòu)造函數(shù)，另外一個(gè)是這個(gè)構(gòu)造函數(shù)產(chǎn)生的對(duì)象(我們稱(chēng)之為jQuery對(duì)象，它和普通對(duì)象沒(méi)有什么區(qū)別),
如下關(guān)系圖:
可以看到j(luò)Query構(gòu)造函數(shù)和jQuery.prototype均有各自的屬性和方法，兩者的調(diào)用方法各不一樣,這兩個(gè)對(duì)象都有一個(gè)extend方法，都是用來(lái)擴(kuò)展自身的屬性和方法，在jQuery內(nèi)部，extend的實(shí)現(xiàn)實(shí)際是靠一樣的代碼,
將在后面的源碼分析中做以詳細(xì)的分析。
1. jQuery 里面有很多東西是出于兼容性，歷史遺留。
比如 .ready() 之類(lèi)的函數(shù)，為什么會(huì)很scroll 有關(guān)，那是為了兼容某些ie。這種代碼對(duì)于編程思想來(lái)說(shuō)不僅沒(méi)用，而且是雜音，你要篩選出來(lái)就得了解這段代碼的變動(dòng)，費(fèi)心費(fèi)力得不償失。
2. jQuery 里面的代碼不一定是最優(yōu)的，例如事件委托，每一次事件觸發(fā)都要調(diào)用選擇器，實(shí)際上是效率很低的。但是我又比較懶，沒(méi)有提交patch。
3. jQuery 實(shí)際上很容易寫(xiě)出來(lái)一個(gè) barebone alternative，在使用的過(guò)程中多想，多思考多總結(jié)就可以了。
4. jQuery 這類(lèi)框架里真正有思維挑戰(zhàn)性的東西不多，一半以上是堆代碼而已，剩下的一點(diǎn)價(jià)值在于架構(gòu)、抽象、擴(kuò)展能力。
5. 我有一句話(huà)與所有的同行分享：工程師讓需求成為現(xiàn)實(shí)，優(yōu)秀工程師化復(fù)雜為簡(jiǎn)單，頂尖工程師變不可能為可能；架構(gòu)師掌握現(xiàn)在，優(yōu)秀架構(gòu)師展望未來(lái)，頂尖架構(gòu)師創(chuàng)造時(shí)代。
jQuery 的設(shè)計(jì)目的是，讓前端工程師的工作更簡(jiǎn)單更輕松，但它并不適合所有的前端工程師，假如你的目標(biāo)是成為優(yōu)秀架構(gòu)師、頂尖架構(gòu)師的話(huà)，你在jQuery里也看不清未來(lái)。
jQuery默認(rèn)使用"$"操作符，$ 符號(hào)只是 window.jQuery 對(duì)象的一個(gè)引用，jQuery.noConflict() ，這個(gè)函數(shù)將變量$的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫(kù)。這有助于確保jQuery不會(huì)與其他庫(kù)的$對(duì)象發(fā)生沖突。在運(yùn)行這個(gè)函數(shù)后，就只能使用jQuery變量訪問(wèn)jQuery對(duì)象。例如，在要用到$("div p")的地方，就必須換成jQuery("div p")。
一、"$"操作符
1、jQuery默認(rèn)使用"$"操作符，prototype等其他框架也是是使用"$"，于是，如果jQuery在其他庫(kù)之后引入，那么jQuery將獲得"$"使用權(quán)。這樣的情況也很容易理解，畢竟JS是從上到下流式執(zhí)行的。
2、如果在其他使用"$"的庫(kù)之前引入jQuery，那么jQuery將不會(huì)占用"$"。
提示：在其他 JavaScript 庫(kù)為其函數(shù)使用 $ 時(shí)，該方法很有用。
我們?cè)趈query中獲取變量都會(huì)使用到$，但是還有很多插件都是可以使用$這個(gè)符號(hào)了，如果我們同時(shí)要引用就會(huì)導(dǎo)致出現(xiàn)問(wèn)題了，jquery為了防止這種事情發(fā)生就引入了noconflict()
二、jQuery.noConflict的定義
jQuery.noConflict 方法包含一個(gè)可選的布爾參數(shù)，用以決定移交 $ 引用的同時(shí)是否移交 jQuery 對(duì)象本身：
jQuery.noConflict([removeAll])
函數(shù)的說(shuō)明:
缺省情況下，執(zhí)行 noConflict 會(huì)將變量 $ 的控制權(quán)移交給第一個(gè)產(chǎn)生 $ 的庫(kù)；當(dāng) removeAll 設(shè)置為 true 時(shí)，執(zhí)行 noConflict 則會(huì)將 $ 和 jQuery 對(duì)象本身的控制權(quán)全部移交給第一個(gè)產(chǎn)生他們的庫(kù)。
三、jQuery.noConflict源碼分析
jQuery 源碼開(kāi)頭，首先做的一件事情是這樣的：
// Map over jQuery in case of overwrite_jQuery = window.jQuery,// Map over the $ in case of overwrite_$ = window.$,
容易理解的是，jQuery 通過(guò)兩個(gè)私有變量映射了 window 環(huán)境下的 jQuery 和 $ 兩個(gè)對(duì)象，以防止變量被強(qiáng)行覆蓋。一旦 noConflict 方法被調(diào)用，則通過(guò) _jQuery, _$, jQuery, $ 四者之間的差異，來(lái)決定控制權(quán)的移交方式，具體的代碼如下：
noConflict: function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery;}
再來(lái)看上面所說(shuō)的參數(shù)設(shè)定問(wèn)題，如果 deep 沒(méi)有設(shè)置，_$ 覆蓋 window.$，此時(shí) jQuery 別名 $ 失效，但 jQuery 本身完好無(wú)損。如果有其他類(lèi)庫(kù)或代碼重新定義了 $ 變量，它的控制權(quán)就完全交接出去了。反之如果 deep 設(shè)置為 true 的話(huà)，_jQuery 覆蓋 window.jQuery，此時(shí) $ 和 jQuery 都將失效。
這種操作的好處是，不管是框架混用還是 jQuery 多版本共存這種高度沖突的執(zhí)行環(huán)境，由于 noConflict 方法提供的移交機(jī)制，以及本身返回未被覆蓋的 jQuery 對(duì)象，完全能夠通過(guò)變量映射的方式解決沖突。
四、jQuery.noConflict實(shí)例
1、將 $ 引用的對(duì)象映射回原始的對(duì)象：
jQuery.noConflict();jQuery("div p").hide(); // 使用 jQuery$("content").style.display = "none"; // 使用其他庫(kù)的 $()
2、恢復(fù)使用別名 $，然后創(chuàng)建并執(zhí)行一個(gè)函數(shù)，在這個(gè)函數(shù)的作用域中仍然將 $ 作為 jQuery 的別名來(lái)使用。在這個(gè)函數(shù)中，原來(lái)的 $ 對(duì)象是無(wú)效的。這個(gè)函數(shù)對(duì)于大多數(shù)不依賴(lài)于其他庫(kù)的插件都十分有效：
jQuery.noConflict();(function($) { $(function() { // 使用 $ 作為 jQuery 別名的代碼 });})(jQuery);... // 其他用 $ 作為別名的庫(kù)的代碼
3、可以將 jQuery.noConflict() 與簡(jiǎn)寫(xiě)的 ready 結(jié)合，使代碼更緊湊：
jQuery.noConflict()(function(){ // 使用 jQuery 的代碼});... // 其他庫(kù)使用 $ 做別名的代碼
4、創(chuàng)建一個(gè)新的別名用以在接下來(lái)的庫(kù)中使用 jQuery 對(duì)象：
var j = jQuery.noConflict();j("div p").hide(); // 基于 jQuery 的代碼$("content").style.display = "none";// 基于其他庫(kù)的 $() 代碼
5、完全將 jQuery 移到一個(gè)新的命名空間：var dom = {};dom.query = jQuery.noConflict(true);//結(jié)果:dom.query("div p").hide(); // 新 jQuery 的代碼$("content").style.display = "none"; // 另一個(gè)庫(kù) $() 的代碼jQuery("div p").hide(); // 另一個(gè)版本 jQuery 的代碼
Jquery視頻教程.zip百度網(wǎng)盤(pán)資源免費(fèi)下載
鏈接:
提取碼:p6qi?
filter()過(guò)濾DOM元素包裝集，是指操作當(dāng)前元素集，刪除不匹配的元素，得到一個(gè)新的集合
$('div').filter('.div1');//選擇div標(biāo)簽中class屬性為div1的div元素
find()在當(dāng)前選中元素的上下文中找到符合條件的后代，返回的是子元素
$('div').find('em');//選擇div標(biāo)簽中的em標(biāo)簽的元素
filter()是對(duì)選中的元素集合操作，得到這些元素中符合條件的元素，而find()是得到選中元素 中符合條件的后代子元素。
重慶分公司
重慶分公司
