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で2回呼び出すのではなくキャッシュします。

マウスオーバーをマウスオーバーにチェーンすることができます。

それ以外は、本当に良い、きれいな最初の努力です。

Answer 2

は何もありだと言うことはできません恐ろしく間違っている（私が間違っていると私を修正する）が、もし私がニットピックこれに代えて

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

：： - また、それは他のコード条件付きにできます

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

私はちょうどそれが空の文字列に属性を設定する代わりにremoveAttrを呼び出すようにきれいだと思う私はこれを使用すると言うでしょう空の文字列に対して現在設定されている値をテストするのではなく、その属性の存在を確認してください。