4

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

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

4

2 回答 2

4

使用 .length 而不是 .size()。在内部 size() 调用长度，因此只需保存额外的调用。

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

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

window.setTimeout( yourFadeTipFunc , opts.fadeTime);

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

您可以将鼠标悬停链接到鼠标悬停。

除此之外，这是一个非常好的，干净的第一次尝试。

于 2009-07-05T00:11:27.070 回答
1

不能说有什么可怕的错误（如果我错了，其他人会纠正我）但如果我要挑剔我会说使用这个：

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

而不是这个：

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

我只是认为调用 removeAttr 而不是将属性设置为空字符串更漂亮 - 而且，它允许其他代码有条件地检查该属性的存在，而不是针对空字符串测试它当前设置的值。

于 2009-07-05T00:09:46.763 回答