javascript - jQuery 插件反馈

Question

我是构建 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);

如果您有更多反馈，请告诉我；)

Answer 1

使用 .length 而不是 .size()。在内部 size() 调用 length 所以只是保存额外的调用。

考虑在创建提示时删除 title 属性，并使用 .data('tip', title) 将提示存储在元素上。这将避免您不断地空白标题然后再将其添加回来的需要。

为您在 setTimeout 中所做的工作创建一个函数。隐含的 eval 被认为是不好的，当您将字符串传递给 setTimeout/Interval 时就会发生这种情况。

window.setTimeout( yourFadeTipFunc , opts.fadeTime);

将 $(document) 缓存在 var 中而不是调用它两次。

您可以将 mouseout 链接到 mouseover。

除此之外，这是一个非常好的、干净的初步努力。