jquery.event 研究学习之bind篇

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里面。

我看到的前面这些还是简单点。后面的函数真的是非一般能力人能体会的。我希望有朋友来共同讨论它的这实现过程。共同揣摩大师的这个作品。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　---------  　　无代码生活不完美