Comment optimiser ces fonctions jquery?

Question

Je travaille sur une application d'utilisateur-javascript intensive. (Au moins c'est intensif pour moi, c'est mon premier projet javascript sérieux).

J'ai quelques fonctions jquery à chaque fois qu'un div est déplacé ou mouseout. Par exemple, il y a quelques divs qui sont des objets déplaçables, et donc quand ils sont mouseover ed, le curseur doit être prêt à bouger. Mais mon interface est si lente que mon patron pense que mon code ne fonctionne pas, alors qu'en fait c'est le cas, mais c'est juste lent et donc l'utilisateur doit parfois attendre jusqu'à 2-3 secondes pour que le curseur se présente comme prévu, ou pour un div pour regarder comme prévu. Juste un exemple. Mon code est quelque chose comme ci-dessous, je ne peux pas reproduire tout ou bien depuis mon entreprise a des droits d'auteur à ce sujet, mais juste pour donner une idée claire de la façon dont je fais les choses:

$.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 
}); 

Maintenant, c'est juste la fonction mouseoverBox, qui est déclenchée comme myBox.mouseoverBox(). sur la souris sur l'événement. Alors bien sûr, ce plugin appelle bindUnlock() qui a des opérations simples comme changer de classe et ajouter des classes à un menu. De plus, avant le passage de la souris, il y a habituellement un mouseout sur un autre div ... donc vous pouvez voir qu'il se passe beaucoup de choses. Cependant, il n'y a généralement pas plus de 10 divs interactifs à un moment donné. Comment puis-je optimiser ce type de code? Je n'ai pas donné tous les détails, mais croyez-moi, la plupart des choses pertinentes sont à peu près comme ça.

J'ai déjà gzippé mon javascript, css, images et polices. J'ai également essayé de réduire en utilisant le compresseur de Yahoo, mais il a en fait gonflé un de mes fichiers au lieu de le compresser.

Answer 1

Pour l'apparence, pourquoi ne pas faire tout cela dans le CSS en utilisant des classes pseudo vol stationnaire, .: par exemple

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

De cette façon, tout le code de changement de classe pourrait être coupé.