JQuery 支持 hide 和 show 事件的方法与分析

浏览数：22 / 时间：2015年06月09日

问题提出

　 JQuery不支持hide和show作为事件形式出现，实际上这两个仅仅是JQuery对象的一个方法（fn）；

有一类UI交互需求，根据一个DOM对象的或者显示对附属的DOM对象做相同操作，

一般情况下，利用jquery hide和show方法的扩展参数中的回调函数，是可以实现的，例如：

  $( "#book" ).hide( "slow", function() {
     $( "#booklet" ).hide()
  });

　　如果附属DOM是一个动态生成的插件，则在主DOM的hide中处理附DOM的隐藏，就破坏了动态生成插件的灵活性，

因为需要让使用对象（主DOM）自行添加同步显示和隐藏代码。例如每一篇随笔的 TAG 可以自己输入，

也可以从历史记录中选择，这个选择插件就属于动态生成的，如果在某种交互条件下，需要隐藏掉 TAG，

须要使用 hide 的回调函数处理。

解决方法

　　如果jq支持hide和show可以设置事件，并且在hide()和show()调用的时候被触发，

类似一般的click事件绑定和触发，则可以解决此问题（插件来设置其目标DOM的hide和show事件，

完成自身的显示隐藏，而不是目标在hide方法中完成，这样只需要在插件的HTML中设置目标ID即可）。

　　但是在jq官网上没有找到hide作为事件，实施上确实没有，

应该是这个不是常规事件，不是由用户能够触发的，故没有涉及为事件，可以理解为动作。

　　在网上找到前辈的足迹，并且找到解决方案。

http://stackoverflow.com/questions/2857900/onhide-type-event-in-jquery

http://jsfiddle.net/mofle/eZ4X3/

　　查看jsfiddle有例子，只需要扩展一下JQ框架

(function($) {
    $.each([‘show‘,‘hide‘], function(i, val) {
        var _org = $.fn[val];
        $.fn[val] = function() {
            this.trigger(val);
            return _org.apply(this, arguments);
        };
    });
})(jQuery);

方法分析

　　上面的方法是对JQ框架实现hide和show方法的扩展，我们来看下JQ是怎么实现这两个方法的：

jQuery.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = jQuery.fn[ name ];
    jQuery.fn[ name ] = function( speed, easing, callback ) {
        return speed == null || typeof speed === "boolean" ?
            cssFn.apply( this, arguments ) :
            this.animate( genFx( name, true ), speed, easing, callback );
    };
});

　　看样是都是跟fn有关，上面提供的解决方案相当于对 JQ fn的做了继承，

除了保证原有fn内容（函数）执行（return _org.apply(this, arguments);），

还增加了对 hide 和 show 事件的触发（this.trigger(val);）。

fn与$()获得的对象

　　那么， fn 到底是什么东西？跟 $()获得的JQ对象有什么关系？

还是要从刀勒符说起, 首先 $== JQuery 的，然后$ 就是一个函数，函数内容如下：

    // Define a local copy of jQuery
    jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor ‘enhanced‘
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
    },

　　这样使用$符号获取的 JQuery对象，实际就是构造函数 jQuery.fn.init new出来的对象，

jQuery.fn.init 此函数定义如下， 其中this表示new出来的对象， 可以看出为 array 形式的对象， 
然后， init == jQuery.fn.init ， new jQuery.fn.init == new init， 
故$()对象继承了init.prototype, 即 我们刚开始关注的 jQuery.fn, 这样， fn中任何函数， 
对于$()对象都可以直接调用 即 $().hide();

    init = jQuery.fn.init = function( selector, context ) {
               ......

        return jQuery.makeArray( selector, this );
    };

// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

事件与trigger

　　那么为什么 bind("hide"， function(e){}) 的事件 hide ，可以被 this.trigger("hide"); 触发调用，

这其中又有哪些道道？

　　bind 间接调用on， on与bind一样同为 jQuery.fn 的一个函数，可以被$()对象调用，

on调用实际上执行，是对$()对象数组中的每一个DOM元素调用了 jQuery.event.add

    bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },

jQuery.fn.extend({

    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
               .......
        return this.each( function() {
            jQuery.event.add( this, types, fn, data, selector );
        });
    },

　　从下面的代码轨迹，看出 bind 将新的事件对象（handleObj）存入了 DOM 对象（elem）的 events[ type ]

jQuery._data( elem ).events[ type ]

jQuery.event = {

    global: {},

    add: function( elem, types, handler, data, selector ) {
        var tmp, events, t, handleObjIn,
            special, eventHandle, handleObj,
            handlers, type, namespaces, origType,
            elemData = jQuery._data( elem );
                ......

        // Init the element‘s event structure and main handler, if this is the first
        if ( !(events = elemData.events) ) {
            events = elemData.events = {};
        }
                .......
            // Init the event handler queue if we‘re the first
            if ( !(handlers = events[ type ]) ) {
                handlers = events[ type ] = [];
                handlers.delegateCount = 0;
                                ........
            }

                       .......

            // Add to the element‘s handler list, delegates in front
            if ( selector ) {
                handlers.splice( handlers.delegateCount++, 0, handleObj );
            } else {
                handlers.push( handleObj );
            }
                        .......

　　同样 trigger fn也是从 jQuery._data( elem ).events[ type ] 获取当前事件的处理函数 handle，然后handle在当前对象上执行。

    trigger: function( event, data, elem, onlyHandlers ) {
        var handle, ontype, cur,
            bubbleType, special, tmp, i,
            eventPath = [ elem || document ],
            type = hasOwn.call( event, "type" ) ? event.type : event,
            namespaces = hasOwn.call( event, "namespace" ) ? event.namespace.split(".") : [];

        cur = tmp = elem = elem || document;
               ........
            // jQuery handler
            handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
            if ( handle ) {
                handle.apply( cur, data );
            }
                 .........

问题解决代码

　　阴影部分为“插件"代码，可以单独裁减掉，而不修改 first div控件原有代码。

<html>
<head>
<title>Example</title>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>

<div id="first" style="width:100px; height:100px; background: green">first</div>
<div id="second" style="width:100px; height:100px; background: yellow" targetDOMID="first">second</div>

<input type="button" value="show first" id="showFirst"/>
<input type="button" value="hide first" id="hideFirst"/>

<script type="text/javascript">
(function($) {
    $.each([‘show‘,‘hide‘], function(i, val) {
        var _org = $.fn[val];
        $.fn[val] = function() {
            this.trigger(val);
            return _org.apply(this, arguments);
        };
    });
})(jQuery);

/* 插件DOM, 给目标DOM(第一个div)添加 隐藏/显示 事件， 
    事件触发后， 第二个div也隐藏/显示 */
var targetDOMID = $("#second").attr("targetDOMID");
var targetDOM = $("#"+targetDOMID);
targetDOM.bind("hide", function(){
    $("#second").hide();
})
.bind("show", function(){
    $("#second").show();
});

/* 按钮click事件触发 第一块div 的显示和隐藏fn */
$("#showFirst").click(function(){
    $("#first").show();
})
$("#hideFirst").click(function(){
    $("#first").hide();
})
 
</script>
 
</body>
</html>