Question

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

每当div翻转或mouseout时，我都会有一些jquery函数。例如，有一些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。我该如何优化这种代码？我并没有给出具体但又相信我的大部分相关内容，就像这样。

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

Answer 1

为了外观，为什么不在CSS中使用悬停伪类，例如：

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

这样，所有课程更改代码都可能被削减。

如何优化这些jquery函数？

1 个答案: