Question

我的问题是出于好奇心，我感谢任何表现差异都可能是微不足道的。

我最近正在考虑为图像地图制作一些悬停效果。和大多数事情一样，其他人用jQuery建议了一个方法。以下是建议代码

$('#borders area').each(function(){
    var mapRegion = $(this).attr('class');
    $(this).hover(
        function(){
            $('#regions').addClass(mapRegion).show();
        },
        function(){
            $('#regions').hide().removeClass(mapRegion);
    });
});

这显然可以正常工作，<div id="regions">绝对位于基座<img>之上，另一个空白透明<img>位于此<map id="borders">之上。

我确实想知道使用jQuery

执行以下操作是否更有意义（稍微减少代码）

$('#borders area').each(function(){
    $(this).hover(
        function(){
            $('#regions').removeClass().addClass($(this).attr('class')).show();
        },
        function(){
            $('#regions').hide();
    });
});

因为没有设置变量，这会更快吗？如果没有提供参数，removeClass（）的工作速度会更快吗？我想我也有兴趣知道哪种语义被认为更好。

Answer 1

在我看来，更有意义的可能是：

$('#borders area').on('mouseenter mouseleave', function(e) {
    if (e.type == 'mouseenter') {
        $('#regions').removeClass().addClass(this.className).show();
    }else{
        $('#regions').hide();
    }
});

因为它避免了mouseenter / mouseleave的不必要的循环和hover()包装，并从native属性中获取了classname。

至于速度，你永远不会注意到差异。

Answer 2

因为没有设置变量，这会更快吗？ removeClass（）是否有效没有提供参数会更快吗？

因为你关心的是从学术角度知道性能的差异（因为可能永远不会有一个可感知的），我建议你做一些你自己的基准测试。

一个有用的在线工具：http://jsperf.com/

使用jQuery是否可以更快地分配变量或使用$（this）进行单次使用？

2 个答案: