jquery源码初探-jquery写法优点以及事件机制说明

jquery其实是利用闭包的原理,用立即执行函数进行包裹,模仿块级作用域,避免了全局变量的污染。另外此函数最终返回的是jQuery,它是一个内部定义的函数,这样的作用是将内部变量以及实现方法隐藏,仅暴露jQuery对象以供调用。
 
 
if ( !noGlobal ) {
   window.jQuery = window.$ = jQuery;
}
return jQuery;
} );

事件机制:通过bind、delegate、on可为dom元素绑定事件。其中bind方法只能绑定此刻已经存在于dom树中的节点。其中click()这种写法就是bind方法的简写形式,delegate和on方法都能实现事件的委托。其中delegate方法选择最近的稳定元素进行委托,而on方法无此限制。通过阅读源码我们可以看到bind以及delegate方法最终也是通过on方法进行实现。我们查看on方法源码后,发现内部实现未参数的处理以及调用jquery.event.add方法,所以事件处理的关键就是这个jquery.event.add方法。这个方法主要是将注册函数与dom本身解耦,将事件相关的内容存储到缓存系统中(dataPriv),每个结点在cache中有一份关联的数据elemData,存储所有相关的数据,事件相关的内容存放在elemData.events中,是jquery内部维护的事件队列,jquery并没有将自定义的回调函数直接作为事件触发回调,而是对其进行一层抽象,保存到elemData.handle中(包括type,data.handler.selector等),然后把这个抽象的回调函数添加到事件注册列表中。下面将对这个方法进行详细介绍。

一。将jquery.event.add方法源码从上到下挑选重要部分进行描述:

1.首先elemData=dataPriv.get(elem);此句是将elem以key-value形式缓存在Data缓存对象中  这个方法会进而调用cache方法。若事件被注册过,用get方法从缓存中拿,若缓存中没有,就创建一个用于elem映射的缓存区,这个处理主要是合并同个元素绑定多个事件的问题,就是把相同元素绑定的不同行为都合并到一个缓存里。

2.进行handler selector等进行判断,看是否有效,创建编号,用来查找和删除事件。

3.为elemData的handle属性添加匿名函数。在匿名函数中返回jQuery.event.dispatch.apply(elem,arguments),此处作用是在elem作用域内调用dispatch方法。eventHandle是作用到addeventlistener的回调函数。回调函数设为dispatch。


event.handle会在这个节点任意事件触发的时候调用到,然后执行dispatch方法。

4.事件可能是通过空格键分割的字符串,将types变成字符串数组,遍历所有事件,若第一次使用,初始化事件处理队列,引入handlers,把事件handleobj全部push到handlers里一个个执行,还区分了委托和其他事件。

5.执行addeventlistener函数,callback函数是dispatch。

二。在dispatch中对传入的event进行重新包装成$.event对象,jquery.event.fix(event)屏蔽掉各浏览器间差异,获取回调函数列表后,将它们放入队列,并根据它们对应的选择器依次决定是否需要执行。



猜你喜欢

转载自blog.csdn.net/u012516440/article/details/79651433
今日推荐