jquery的强大不仅仅在于它的外在表现上的简单快捷。更多的是内在的实现和某些函数的实现。我认为DOM,EVENT这些是比较难的一些东西。我今天粗略的看了它的这个部分的代码,想为自己的事件处理提供思路,也借鉴逆天达人们的各种高级奇艺。
/* * jquery code express */ bind = function( types, data, fn ) { return this.on( types, null, data, fn ); }; /* | | | | |-->最终函数。 * | | | |--> 传入的额外参数(可选) * | | |--> 控制是否动态绑--live() * | |--> 事件类型 * |--> jquery.Event */ on = function( types, selector, data, fn, /*INTERNAL*/ one ) { /* | | | | |--> 执行次数--one() * | | | |-->最终函数。 * | | |--> 传入的额外参数(可选) * | |--> 控制是否动态绑,if(true)这里是动态的DOM--live() * |--> 事件类型 * */ var origFn, type; // Types can be a map of types/handlers if ( typeof types === "object" ) { // ( types-Object, selector, data ) /* * 这里是做判断如果是个对象,先看看selector是不是有, * 如果没有(JQUERY这里放的是需要用选择器选的字符串) * 就默认没这参数,把它作为DATA,把selector空掉。 */ if ( typeof selector !== "string" ) { // ( types-Object, data ) data = selector; selector = undefined; } /* * 这里遍历这个以对象形式来绑定的函数并执行每个的绑定。 * 最后返回this.|-> jquery对象 */ for ( type in types ) { this.on( type, selector, data, types[ type ], one ); } return this; } /* 回来最开始。types, selector, data, fn, one * 如果是常规绑定,看这时候的DATA 同时看FN是不是有。都没有的时候 * 估计就是selector就是函数 用户没设置默认的额外参数以及其他的了。 * 清空干扰参数。 * */ if ( data == null && fn == null ) { // ( types, fn ) fn = selector; data = selector = undefined; } else if ( fn == null ) { /* * 如果这时候的FN还是没有的。但是DATA有,看看selector是不是字符串,如果是, * 可能这data 就是咱的FN了。selector可能是那选择器。 * */ if ( typeof selector === "string" ) { // ( types, selector, fn ) fn = data; data = undefined; } else { /* * 如果这selector不是字符(不是待选择的)那么可能是咱设置的参数 。 * 设置的函数还是咱的 arguments[2] 参数 是arguments[1] 事件类型是 * arguments[0] */ // ( types, data, fn ) fn = data; data = selector; selector = undefined; } } if ( fn === false ) { //如果FN 是false 估计是用户想做阻止事件而不是处理事情 fn = returnFalse;//返回个FALSE。函数来触发时候运行。 } else if ( !fn ) { //FN 就没有的时候 return this;// 返回 这个jquery 对象吧。 } if ( one === 1 ) { // one 一次绑定函数的时候。 origFn = fn;//先存起来 咱的函数。 fn = function( event ) { //把咱的函数和这个删除函数绑一起。这样执行了就删除。也就没了。 // Can use an empty set, since event contains the info jQuery().off( event ); return origFn.apply( this, arguments ); }; // Use same guid so caller can remove using origFn //这应该是jquery的内部编号。我暂时 这么认为。 fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); } return this.each( function() { //所有的事情处理结束了。把咱的事件加进去进行绑定。 jQuery.event.add( this, types, fn, data, selector ); }); };
可以看到的是 jquery的所有主要EVENT 方法基本是靠这个ON OFF ONE来处理参数 然后进行分发。分发到的是jquery.event.add|remove里面。
我看到的前面这些还是简单点。后面的函数真的是非一般能力人能体会的。我希望有朋友来共同讨论它的这实现过程。共同揣摩大师的这个作品。
--------- 无代码生活不完美