jQuery 플러그인 피드백

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

.size()보다는 .length를 사용하십시오. 내부적으로 size()는 길이를 호출하므로 여분의 호출을 저장합니다.

팁을 만들 때 .data ('tip', title)를 사용하여 팁을 저장할 때 title 속성을 제거하는 것이 좋습니다. 이렇게하면 제목을 항상 비워 두었다가 다시 추가 할 필요가 없습니다.

setTimeout 내부에서 수행하는 작업에 대한 함수를 만듭니다. Implied eval은 문자열을 setTimeout/Interval에 전달할 때 문제가되는 것으로 간주됩니다.

window.setTimeout(yourFadeTipFunc , opts.fadeTime); 

$ (문서)를 var에 두 번 호출하지 않고 캐시합니다.

마우스 오버에 마우스를 연결할 수 있습니다.

그 외에도 정말 좋은 깨끗한 첫 번째 노력입니다.

Answer 2

가 거기에 아무것도 말할 수 없다 끔찍하게 틀린 (다른 사람은 내가 틀렸다면 나를 바로 잡는다). 그러나 내가 nitpick 또한,이 조건에 다른 코드를 허용 -

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

난 그냥 대신 빈 문자열로 속성을 설정하는 removeAttr를 호출하는 예쁜 것 같아요 : 대신의

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

: 내가 사용이 말할 것 빈 문자열에 대해 현재 설정된 값을 테스트하기보다는 해당 속성의 존재를 확인하십시오.