关于jquery自己写插件的问题。。高手来。速来围观

Question

(function($){
    $.fn.colorTip = function(settings){
 
        var defaultSettings = {
            //颜色
            color        : 'yellow',
            //延迟
            timeout        : 500
        }
        //提示框的颜色
        var supportedColors = ['red','green','blue','white','yellow','black'];
       
        /* 合并默认参数和用户自定义参数 */
        settings = $.extend(true,defaultSettings,settings);
        return this.each(function(){
 
            var elem = $(this);
           
            // 如果该对象不包含title属性，直接予以返回
            if(!elem.attr('title')) return true;
           
            // 实例化eventScheduler（定时器）           
            var scheduleEvent = new eventScheduler();
            //实例化Tip(提示类，产生、显示、隐藏)
            var tip = new Tip(elem.attr('title'));
 
            // 产生提示框，并给提示框父容器添加样式
           
            elem.append(tip.generate()).addClass('colorTipContainer');
 
            // 检查提示框父容器是否有颜色样式
           
            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++)
            {
                if(elem.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }
           
            // 如果没有，使用默认的颜色
           
            if(!hasClass){
                elem.addClass(settings.color);
            }
           
            // 鼠标滑过提示框父容器时，显示提示框
            // 鼠标移出，则隐藏
           
            elem.hover(function(){
 
                tip.show();
               
                //清理定时器
               
                scheduleEvent.clear();
 
            },function(){
 
                //启动定时器
               
                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);
 
            });
           
            //删除title属性
            elem.removeAttr('title');
        });
       
    }
 
 
    /*
    /    定时器类
    */
 
    function eventScheduler(){}
   
    eventScheduler.prototype = {
        set    : function (func,timeout){
            //添加定时器
            this.timer = setTimeout(func,timeout);
        },
        clear: function(){
            //清理定时器
            clearTimeout(this.timer);
        }
    }
 
 
    /*
    /    提示类
    */
 
    function Tip(txt){
        this.content = txt;
        this.shown = false;
    }
   
    Tip.prototype = {
        generate: function(){
            //产生提示框
           
            return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
        },
        show: function(){
            //显示提示框
            if(this.shown) return;
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
            this.shown = true;
        },
        hide: function(){
            //隐藏提示框
            this.tip.fadeOut();
            this.shown = false;
        }
    }
   
})(jQuery);以上是代码。小弟在 return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));这段代码不是很明白。求高手指教。jQuery插件

Answer 1

如果this.tip存在，直接返回this.tip如果this.tip不存在，执行this.tip = '...'其实this.tip = '...'是一个赋值表达式，返回的结果就是this.tip

Answer 2

分开写就明白了
if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

Answer 3

this.tip如果为空则对this.tip赋值，然后return this.tip

Answer 4

拿这段代码中    var tip = new Tip(elem.attr('title'));已经实例化了Tip。并且已经有了tip。拿这个判断tip是否多余呢。已经有了tip。返回的就是tip，那后面那句给tip赋值是不是多余了。永远不会执行后面的赋值代码呢？？

Answer 5

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？

Answer 6

拿这段代码中    var tip = new Tip(elem.attr('title'));已经实例化了Tip。并且已经有了tip。拿这个判断tip是否多余呢。已经有了tip。返回的就是tip，那后面那句给tip赋值是不是多余了。永远不会执行后面的赋值代码呢？？你理解的有问题
var tip = new Tip(elem.attr('title'));
是实例化了一个tip，上面那句只是给这个tip添加一个名为tip的属性。。
也就是你可以tip.generate()之后就可以直接tip.tip去取这个jquery对象了
那要是我改个名字：
var aaaa = new Tip(elem.attr('title'));
你是不是就没这疑问了？

Answer 7

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？
有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip

Answer 8

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？
有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip我了解了。呵呵。拿这个判断return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));。是不是有点多余。因为属性tip。本来就没有。只是在generate中才有对tip进行赋值。也就是说。只有调用两次generate。才会成立tip不为空。但是这是内部的代码。所以是否还需要对tip为空进行判断呢？直接返回tip的赋值不是就可以了吗？

Answer 9

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？
有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip我了解了。呵呵。拿这个判断return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));。是不是有点多余。因为属性tip。本来就没有。只是在generate中才有对tip进行赋值。也就是说。只有调用两次generate。才会成立tip不为空。但是这是内部的代码。所以是否还需要对tip为空进行判断呢？直接返回tip的赋值不是就可以了吗？一次就够了，一开始没有，所以会执行||后面的代码，直接返回是可以，但是每次你都多构造一个dom节点。而且以后再使用的话都要tip.generate()上面的代码，执行||后面，构造一个jquery对象，并赋值给this.tip,以后再使用的时候就直接调用tip.tip你说上面2种方法，哪种更方便？

Answer 10

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？
有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip我了解了。呵呵。拿这个判断return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));。是不是有点多余。因为属性tip。本来就没有。只是在generate中才有对tip进行赋值。也就是说。只有调用两次generate。才会成立tip不为空。但是这是内部的代码。所以是否还需要对tip为空进行判断呢？直接返回tip的赋值不是就可以了吗？一次就够了，一开始没有，所以会执行||后面的代码，直接返回是可以，但是每次你都多构造一个dom节点。而且以后再使用的话都要tip.generate()上面的代码，执行||后面，构造一个jquery对象，并赋值给this.tip,以后再使用的时候就直接调用tip.tip你说上面2种方法，哪种更方便？
恩，学习了...

Answer 11

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？
有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip我了解了。呵呵。拿这个判断return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));。是不是有点多余。因为属性tip。本来就没有。只是在generate中才有对tip进行赋值。也就是说。只有调用两次generate。才会成立tip不为空。但是这是内部的代码。所以是否还需要对tip为空进行判断呢？直接返回tip的赋值不是就可以了吗？一次就够了，一开始没有，所以会执行||后面的代码，直接返回是可以，但是每次你都多构造一个dom节点。而且以后再使用的话都要tip.generate()上面的代码，执行||后面，构造一个jquery对象，并赋值给this.tip,以后再使用的时候就直接调用tip.tip你说上面2种方法，哪种更方便？恩 说的真好。结贴了。