jquery源码探索之----事件系统Events(一)

      着学习jquery的深入,发现jquery内部确实之优美,以前从没觉得jquery是做网站必须的,但是现在看来,想做一个漏洞很少的网页,jquery是一个利器。

     最近看jquery源码看了很多,主要是看了一些底层支持模块,也大概知道jquery内部的原理是什么了,虽然记不到可能记不到很多api,但是那不重要,看到官网的api,闭着眼睛也知道它是干什么的了。

     今天就来说说我认为jquery内部最复杂的模块之一,事件系统。这个模块一篇两篇应该是讲不完的了,那就一步一步跟我来梳理吧!

     还是像往常一样,上个图先:

技术分享

观察者模式以前就说过了吧,jquery事件系统也是应用了观察者模式,在介绍之前,我们先来看看什么是jquery的数据缓存系统。

为什么要使用jquery的事件系统?

(一)jquery数据缓存系统

有些时候,我们需要给js对象或者DOM对象附加一些数据,为js对象附加数据就不说了,直接可以object.data={},但是要给DOM元素附加数据时就要注意了。比如下面这种情况:

$(document).ready(function() {
    var button = document.getElementById('button-1');
        button.onclick = function() {
            console.log('hello');
        return false;
        };
});
上面这种形式的写法相信大家是经常这样写的,我以前也是的,但是这种有什么坏处么,在非IE浏览器中是没什么问题,但是在古老的IE浏览器中写上上面这句话,问题就来了:

IE的dom元素的垃圾回收机制是引用计数的方式,至于引用计数是什么方式,大家可以百度一下,这要是再展开,那就要说很久很久了。循环引用就出现了,只要循环引用一出现,就会造成内存泄漏。这里是怎么造成循环引用的呢?


技术分享

很明显的看到,在闭包环境内,造成了循环引用,那怎么样来解决这个问题呢?那肯定就是数据缓存系统了。

怎么样避免这种循环情况?我们只需要破坏一条引用指针就可以了。那到底是破坏哪一条呢?

function作用域链引用外面button这条指针明显是不好破坏的,因为这里往往是开发者最容易写的,那就破坏button.click指向匿名函数这条了。

那怎么破坏这条路径呢?

我们来看卡jquery的事件缓存系统是怎么做的、

技术分享

在jquery当中,并没有直接引用对象,而是给dom元素设置了一个属性jquery12123213为1,1为基本数据类型,所以不存在循环引用,但是这个1却能跟$.cache当中的属性1相对应,那么根据这个1就能找到对应的事件处理函数fn,是不是觉得很巧妙,我也是这么认为的。

好,今天就说到这里了吧。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。