命名空间全局变量问题

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

您可以将要使用的类附加到悬停的项目。因此，如果您的 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')。

Answer 2

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

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

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

$('#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');
}