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

[Sb梁先生]

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

这段代码不是很明白。求高手指教。

[等不到的彼岸花]

引用 10 楼 functionsub 的回复:

[quote=引用 9 楼 SbLiangXianSheng 的回复:] [quote=引用 8 楼 functionsub 的回复:] [quote=引用 6 楼 SbLiangXianSheng 的回复:] [quote=引用 2 楼 functionsub 的回复:] 分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？[/quote] 有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip[/quote] 我了解了。呵呵。拿这个判断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的赋值不是就可以了吗？[/quote] 一次就够了，一开始没有，所以会执行||后面的代码， 直接返回是可以，但是每次你都多构造一个dom节点。而且以后再使用的话都要tip.generate() 上面的代码，执行||后面，构造一个jquery对象，并赋值给this.tip,以后再使用的时候就直接调用tip.tip 你说上面2种方法，哪种更方便？[/quote] 恩，学习了...

[Sb梁先生]

引用 10 楼 functionsub 的回复:

[quote=引用 9 楼 SbLiangXianSheng 的回复:] [quote=引用 8 楼 functionsub 的回复:] [quote=引用 6 楼 SbLiangXianSheng 的回复:] [quote=引用 2 楼 functionsub 的回复:] 分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？[/quote] 有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip[/quote] 我了解了。呵呵。拿这个判断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的赋值不是就可以了吗？[/quote] 一次就够了，一开始没有，所以会执行||后面的代码， 直接返回是可以，但是每次你都多构造一个dom节点。而且以后再使用的话都要tip.generate() 上面的代码，执行||后面，构造一个jquery对象，并赋值给this.tip,以后再使用的时候就直接调用tip.tip 你说上面2种方法，哪种更方便？[/quote] 恩 说的真好。结贴了。

[functionsub]

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

[functionsub]

分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

[ddgx]

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

[Sb梁先生]

引用 2 楼 functionsub 的回复:

分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

呵呵 我明白了

[Sb梁先生]

引用 1 楼 functionsub 的回复:

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

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

[Sb梁先生]

引用 2 楼 functionsub 的回复:

分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

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

[functionsub]

引用 5 楼 SbLiangXianSheng 的回复:

[quote=引用 1 楼 functionsub 的回复:] 如果this.tip存在，直接返回this.tip 如果this.tip不存在，执行this.tip = '...' 其实this.tip = '...'是一个赋值表达式，返回的结果就是this.tip

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

[functionsub]

引用 6 楼 SbLiangXianSheng 的回复:

[quote=引用 2 楼 functionsub 的回复:] 分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

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

[Sb梁先生]

引用 8 楼 functionsub 的回复:

[quote=引用 6 楼 SbLiangXianSheng 的回复:] [quote=引用 2 楼 functionsub 的回复:] 分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？[/quote] 有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip[/quote] 我了解了。呵呵。拿这个判断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的赋值不是就可以了吗？

[functionsub]

引用 9 楼 SbLiangXianSheng 的回复:

[quote=引用 8 楼 functionsub 的回复:] [quote=引用 6 楼 SbLiangXianSheng 的回复:] [quote=引用 2 楼 functionsub 的回复:] 分开写就明白了

if(!this.tip){
    this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>')
}
return this.tip;

还是说var tip = new Tip(elem.attr('title'))中的tip 和下面中this.tip.没有半毛钱关系呢？[/quote] 有关系，this.tip是tip的一个属性。这里的this就是var tip = new Tip(elem.attr('title'))这个tip，this.tip就是tip.tip[/quote] 我了解了。呵呵。拿这个判断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的赋值不是就可以了吗？[/quote] 一次就够了，一开始没有，所以会执行||后面的代码， 直接返回是可以，但是每次你都多构造一个dom节点。而且以后再使用的话都要tip.generate() 上面的代码，执行||后面，构造一个jquery对象，并赋值给this.tip,以后再使用的时候就直接调用tip.tip 你说上面2种方法，哪种更方便？