首页 > 代码库 > JQuery 支持 hide 和 show 事件的方法与分析

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

问题提出

   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<script id="MathJax-Element-1" type="math/tex"> == JQuery 的, 然后</script>就是一个函数, 函数内容如下:

    // 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>