1

我正在开发一个 javascript 密集型用户界面应用程序。（至少它对我来说是密集的，这是我第一个严肃的 javascript 项目）。

每当 adiv翻转或mouseout. 例如，有一些divs是可拖动的对象，因此当它们被mouseover编辑时，光标必须看起来准备好移动。但是我的界面太慢了，以至于我的老板认为我的代码不起作用，而事实上它确实如此，但它只是很慢，因此用户有时必须等待 2-3 秒才能使光标看起来像预期的那样，或者等待div看起来像预期的那样。只是一个例子。我的代码如下所示，由于我的公司对此拥有版权，因此我无法完全或正确地复制它，但只是为了让我清楚地了解我的工作方式：

$.fn.extend({
    mouseoverBox: function() {
    return this.each(function() {
        var $this = $(this);   
                if(!$this.hasClass('ready')) 
                {   if($this.hasClass('activated'))
                    {
                        $this.removeClass('activated');
                    }
                    $this.addClass('ready');
                }
                var img_id = $this.children('.theimg').attr('id');
                //someitem.children('somechildren').remove();
                //someitem.append(somemenu div)
                //$this.draggable();
                //$this.resizable();
                if($this.hasClass('unlocked'))
                {
                    $this.draggable( "option", "disabled", false );
                    $this.resizable( "option", "disabled", false );
                }
                $this.bindUnlock();
            });
     }
// end mouseoverBox
});

现在这只是 mouseoverBox 函数，它的触发方式类似于myBox.mouseoverBox(). 在鼠标悬停事件上。然后当然是调用这个插件，bindUnlock()它具有简单的操作，例如更改类和向菜单添加类。此外，在任何鼠标悬停之前，通常都会出现mouseout另一个div...所以你可以看到有很多事情正在发生。不过，任何时候通常不会有超过 10 个互动divs。如何优化这种代码？我没有给出每一个具体的信息，但相信我，大部分相关内容几乎就是这样。

我已经压缩了我的 javascript、css、图像和字体。我还尝试使用 Yahoo Compressor 进行压缩，但它实际上使我的一个文件膨胀而不是压缩它。

4

1 回答 1

2

对于外观和感觉，为什么不在 CSS 中使用悬停伪类来执行此操作，例如：

div.draggable:hover { 
    background:yellow;
    cursor:ponter;
}

这样一来，您所有的类更改代码都可能被削减。

于 2013-02-08T15:52:39.340 回答