命名空间全局变量问题

Question

我对命名空间和全局变量非常陌生。我目前有这段代码：

$('#formats1').hover(function() {
    var tag = 'div.cds';
    var offset = $(this).position();
    var width = $(tag).outerWidth();
    var height = $(tag).outerHeight();
    $(tag).show();
    $(tag).css('left', offset.left - width + 'px');
    $(tag).css('top', offset.top - height + 'px');
}, function() {
    $("div.cds").hide();
});

$('#formats2').hover(function() {
    var tag = 'div.lp';
    var offset = $(this).position();
    var width = $(tag).outerWidth();
    var height = $(tag).outerHeight();
    $(tag).show();
    $(tag).css('left', offset.left - width + 'px');
    $(tag).css('top', offset.top - height + 'px');
}, function() {
    $("div.lp").hide();
});

目前对于各种 div 重复了很多次。

我觉得这将是一个整合命名空间和命名空间的好机会。全局变量，但我不确定该怎么做。有什么想法吗？

谢谢！

Answer 1

为什么不尝试使用函数呢？

$('#formats1').hover(function() {
    do_hover('div.cds', this);
}, function() {
    $("div.cds").hide();
});

$('#formats1').hover(function() {
    do_hover('div.lp', this);
}, function() {
    $("div.lp").hide();
});

function do_hover(tag, self){
    var offset = $(self).position();
    var width = $(tag).outerWidth();
    var height = $(tag).outerHeight();
    $(tag).show();
    $(tag).css('left', offset.left - width + 'px');
    $(tag).css('top', offset.top - height + 'px');
}

Answer 2

嗯，不惜一切代价创建命名空间并避免全局变量始终是一个非常好主意。但在这个特殊的例子中，你只需要一点 Javascript 和jQuery Sugar：

var data = [{id: '#formats1', tag: 'div.cds'}, {id: '#formats2', tag: 'div.lp'} /*, ... */];

$.each(data, function( _, info ) {
    $(info.id).hover(function() {
        var $tag = $(info.tag),
            mypos = $.extend({
                width: $tag.outerWidth(),
                height: $tag.outerHeight()
            }, $(this).position());

        $tag.show().css({
            left: mypos.left - mypos.width + 'px',
            top: mypos.top - mypos.height + 'px'
        });
    }, function() { 
       $("div.cds").hide();
    });
});

唯一应该在这里关闭的合理变量是 $('div.cds')。例如，您可以将整个代码包装到自调用方法中：

(function _namespace() {
    var $tag = $('#div.cds');

    $('#formats1, #formats2').hover(function() {
    });
    // ...
}());

Answer 3

您可以将要使用的类附加到悬停的项目。因此，如果您的 HTML 看起来像这样：

<div id="formats1" data-tagclass="cds">...</div>
<div id="formats2" data-tagclass="lps">...</div>

那么您可以在 JavaScript 中这样做：

$('#formats1, formats2').hover(function() {
    var $this  = $(this);
    var $tag   = $('div.' + $this.data('tagclass'));
    var offset = $this.position();
    var width  = $tag.outerWidth();
    var height = $tag.outerHeight();
    $tag.show();
    $tag.css('left', offset.left - width  + 'px');
    $tag.css('top',  offset.top  - height + 'px');
}, function() {
    $('div.' + $this.data('tagclass')).hide();
});

如果您使用的是较旧的 jQuery，那么您可能需要使用 $this.attr('data-tagclass')而不是 $this.data('tagclass')。