jQuery plugin feedback

Question

Я новичок в создании плагинов jQuery. Я видел и использовал множество плагинов для всплывающих подсказок, и сегодня я решил построить свой собственный.

Могу ли я получить обратную связь по коду? Какая работа, что нет. Оптимизация. Кэширование.
Что я могу сделать, чтобы сделать это быстрее и лучше?

Это было бы действительно полезно для моего обучения и, надеюсь, для других.

Heres мой плагин:

;(function($) { 
    $.fn.jTooltip = function(options) { 

     opts = $.extend({}, $.fn.jTooltip.defaults, options); 

     return this.each(function() { 

      var $this = $(this); 
      var content; 
      var showTimeout; 

      $tip = $('#jTooltip'); 
      if($tip.size() == 0){ 
       $('body').append('<div id="jTooltip" style="display:none;position:absolute;"><div></div></div>'); 
       $tipContent = $('#jTooltip div'); 
      } 

      $this.mouseover(function(event) { 
       content = $this.attr('title'); 
       $this.attr('title', ''); 
       $tipContent.html(content); 
       $body.bind('mousemove', function(event){ 
        $tip.css({ 
         top: $(document).scrollTop() + (event.pageY + opts.yOffset), 
         left: $(document).scrollLeft() + (event.pageX + opts.xOffset) 
        }); 
       }); 
       showTimeout = setTimeout('$tip.fadeIn(' + opts.fadeTime + ')', opts.delay); 
      }); 

      $this.mouseout(function(event) { 
       clearTimeout(showTimeout); 
       $this.attr('title', content); 
       $('body').unbind('mousemove'); 
       $tip.hide(); 
      }); 

     }); 
    }; 

    $.fn.jTooltip.defaults = { 
     delay: 0, 
     fadeTime: 300, 
     yOffset: 10, 
     xOffset: 10 
    }; 

})(jQuery); 

Обновленный код

 ;(function($) { 
    $.fn.jTooltip = function(options) { 

     opts = $.extend({}, $.fn.jTooltip.defaults, options); 

     return this.each(function() { 

      var $this = $(this); 
      var showTimeout; 

      $this.data('title',$this.attr('title')); 
      $this.removeAttr('title'); 

      $document = $(document); 
      $body = $('body'); 
      $tip = $('#jTooltip'); 
      $tipContent = $('#jTooltip div'); 
      if($tip.length == 0){ 
       $body.append('<div id="jTooltip" style="display:none;position:absolute;"><div></div></div>');  
      } 

      $this.hover(function(event){ 
       $tipContent.html($this.data('title')); 
       $body.bind('mousemove', function(event){ 
        $tip.css({ 
         top: $document.scrollTop() + (event.pageY + opts.yOffset), 
         left: $document.scrollLeft() + (event.pageX + opts.xOffset) 
        }); 
       }); 
       showTimeout = setTimeout(function(){ 
        $tip.fadeIn(opts.fadeTime);       
       }, opts.delay);    
      }, function(){ 
       clearTimeout(showTimeout); 
       $body.unbind('mousemove'); 
       $tip.hide(); 
      }); 

     }); 
    }; 

    $.fn.jTooltip.defaults = { 
     delay: 0, 
     fadeTime: 300, 
     yOffset: 10, 
     xOffset: 10 
    }; 

})(jQuery); 

Позвольте мне знать, если у вас есть больше обратной связи;)

Answer 1

Используйте .length, а не .size(). Internal size() вызывает длину, поэтому просто сохраняет дополнительный вызов.

Рассмотрите возможность удаления атрибута title при создании наконечника и сохранения наконечника элемента с использованием .data ('tip', title). Это позволит избежать необходимости постоянно удалять заголовок, а затем добавлять его обратно.

Создайте функцию для работы, которую вы выполняете внутри setTimeout. Подразумеваемый eval считается плохим, что происходит, когда вы передаете строку в setTimeout/Interval.

window.setTimeout(yourFadeTipFunc , opts.fadeTime); 

Кэш $ (документ) в var, а не вызов его дважды.

Вы можете привязать курсор мыши к мыши.

Помимо этого, это действительно хорошее, чистое первое усилие.

Answer 2

не могу сказать, что есть что-нибудь ужасно неправильно (другие меня исправляют, если я ошибаюсь), но если бы я был nitpick Я бы сказал, использовать это:

$this.removeAttr('title'); //slightly more readable 

вместо этого:

$this.attr('title', ''); 

Я просто думаю, что симпатичнее называть removeAttr вместо установки атрибута пустая строка - также, что позволяет другой код условно проверьте наличие этого атрибута, а не проверяйте его текущее установленное значение на пустую строку.