jquery源碼探索之----事件系統(tǒng)Events

學(xué)習(xí) jquery 的深入，發(fā)現(xiàn) jquery 內(nèi)部確切之優(yōu)美，之前從沒(méi)覺(jué)得 jquery 是做網(wǎng)站必須的，但是現(xiàn)在看來(lái)，想做一個(gè)漏洞很少的網(wǎng)頁(yè)， jquery 是一個(gè)利器。

最近看 jquery 源碼看了很多，主要是看了一些底層支持模塊，也大概知道 jquery 內(nèi)部的原理是什么了，雖然記不到可能記不到很多 API，但是那不重要，看到官網(wǎng)的 API，閉著眼睛也知道它是干什么的了。

今天就來(lái)講說(shuō)我認(rèn)為 jquery 內(nèi)部最復(fù)雜的模塊之一，事件系統(tǒng)。這個(gè)模塊一篇兩篇應(yīng)當(dāng)是講不完的了，那就一步一步跟我來(lái)梳理吧！

還是像平常一樣，上個(gè)圖先:

視察者模式之前就說(shuō)過(guò)了吧，jquery 事件系統(tǒng)也是利用了視察者模式，在介紹之前，我們先來(lái)看看什么是 jquery 的數(shù)據(jù)緩存系統(tǒng)。

為何要使用 jquery 的事件系統(tǒng)？

(1)jquery 數(shù)據(jù)緩存系統(tǒng)

有些時(shí)候，我們需要給 js 對(duì)象或 DOM 對(duì)象附加一些數(shù)據(jù)，為 js 對(duì)象附加數(shù)據(jù)就不說(shuō)了，直接可以 object.data={}，但是要給 DOM 元素附加數(shù)據(jù)時(shí)就要注意了。比以下面這類情況:

上面這類情勢(shì)的寫(xiě)法相信大家是常常這樣寫(xiě)的，我之前也是的，但是這類有什么壞處么，在非IE閱讀器中是沒(méi)什么問(wèn)題，但是在古老的IE 瀏覽器中寫(xiě)上上面這句話，問(wèn)題就來(lái)了:

IE 的 dom 元素的垃圾回收機(jī)制是援用計(jì)數(shù)的方式，至于援用計(jì)數(shù)是什么方式，大家可以百度一下，這要是再展開(kāi)，那就要說(shuō)很久很久了。循環(huán)援用就出現(xiàn)了，只要循環(huán)援用一出現(xiàn)，就會(huì)造成內(nèi)存泄漏。這里是怎樣造成循環(huán)援用的呢？

很明顯的看到，在閉包環(huán)境內(nèi)，造成了循環(huán)援用，那怎樣樣來(lái)解決這個(gè)問(wèn)題呢？那肯定就是數(shù)據(jù)緩存系統(tǒng)了。

怎樣樣避免這類循環(huán)情況？我們只需要破壞一條援用指針就能夠了。那究竟是破壞哪一條呢？

function 作用域鏈援用外面 button 這條指針明顯是不好破壞的，由于這里常常是開(kāi)發(fā)者最容易寫(xiě)的，那就破壞 button.click 指向匿名函數(shù)這條了。

那怎樣破壞這條路徑呢？

我們來(lái)看看 jquery 的事件緩存系統(tǒng)是怎樣做的：

在 jquery 當(dāng)中，并沒(méi)有直接援用對(duì)象，而是給 dom 元素設(shè)置了一個(gè)屬性 jquery12123213為1，1 為基本數(shù)據(jù)類型，所以不存在循環(huán)援用，但是這個(gè)1卻能跟 $.cache 當(dāng)中的屬性1相對(duì)應(yīng)，那么根據(jù)這個(gè)一就可以找到對(duì)應(yīng)的事件處理函數(shù) fn,是否是覺(jué)得很奇妙，我也是這么認(rèn)為的。