jQuery插件反饋

我是新來構建jQuery插件。我已經看到並使用了很多工具提示插件，今天我決定自己開發。jQuery插件反饋

我可以獲得關於代碼的一些反饋嗎？什麼工作，什麼不工作。優化。緩存。
我能做些什麼來使它更快更好？

這對我的學習很有幫助，也希望對其他人有幫助。

繼承人我的插件：

;(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);

讓我知道，如果你有一些更多的反饋;）

來源

2009-07-04 Sindre Sorhus

mofle - 如果您可以將修改後的代碼添加到您的問題中，可能會幫助其他人，我們仍然可以找到改進它的方法。 – redsquare 2009-07-05 17:34:10

使用.length而不是.size（）。內部size（）調用長度，因此只保存額外的呼叫。

考慮在創建提示並使用.data（'tip'，title）將提示存儲在元素上時刪除title屬性。這樣可以避免您不斷需要空白標題，然後再將其添加回來。

爲您在setTimeout中執行的工作創建一個函數。隱含的eval被認爲是不好的，這是當你將一個字符串傳遞給setTimeout/Interval時發生的情況。

window.setTimeout(yourFadeTipFunc , opts.fadeTime);

在var中緩存$（document）而不是調用它兩次。

您可以將mouseout鏈接到鼠標懸停。

除此之外，這是一個非常好的，乾淨的第一次努力。

來源

2009-07-05 00:11:27 redsquare

不能說有什麼事可怕的錯誤（其他人糾正我，如果我錯了），但如果我挑剔我會說使用這樣的：

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

，而不是這樣的：

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

我只是認爲這是漂亮調用而不是屬性設置爲空字符串removeAttr - 也，它允許其他代碼有條件檢查該屬性的存在性，而不是測試它當前對空字符串的設置值。

來源

2009-07-05 00:09:46 karim79

jQuery插件反饋

回答

相關問題