学习和扩展一个jQuery插件

Question

我正在学习更多关于JavaScript插件的过程，并找到了一个对我感兴趣的东西。我愿意让我的脚脏，看看这个东西怎么可以修改...

(function($){ 
    var methods = { 
    init : function(options) { 

    return this.each(function(){ 
    var $this = $(this), 
     data = $this.data('tooltip'), 
     tooltip = $('<div />', { 
      text : $this.attr('title') 
     }); 

    // If the plugin hasn't been initialized yet 
    if (! data) { 

    console.log('still working..' ); 
     /* 
     Do more setup stuff here 
     */ 

     $(this).data('tooltip', { 
      target : $this, 
      tooltip : tooltip 
     }); 

    } 
    }); 

}, 
show : function() { 
    console.log('this is the show'); 
}, 
hide : function() { 
    // GOOD 
}, 
update : function(content) { 
    console.log('this is the update');  
    // !!! 
    } 
    }; 

    $.fn.tooltip = function(method) { 

// Method calling logic 
if (methods[method]) { 
    return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
} else if (typeof method === 'object' || ! method) { 
    return methods.init.apply(this, arguments); 
} else { 
    $.error('Method ' + method + ' does not exist on jQuery.tooltip'); 
}  

    }; 
    })(jQuery); 

好，我有4个问题... 1.how你初始化这个插件？当我尝试运行一个随机的div元素$（'＃mtest'）。tooltip（）;我一直使用我的控制台日志'仍然工作..'。

2 init：在var方法里面，这是私有的，这意味着我无法从这个插件的外部访问init：？对？我会在哪里放置初始化逻辑，因为它似乎正在返回选项......？

3. 我感到困惑的这部分代码...

if (methods[method]) { 
    return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
} else if (typeof method === 'object' || ! method) { 
    return methods.init.apply(this, arguments); 
} else { 
    $.error('Method ' + method + ' does not exist on jQuery.tooltip'); 
}  

我知道它返回的所有方法，但...

3A。为什么写方法[方法] //看起来像[方法]是一个数组，并且这看起来让我感到困惑，因为我没有看到一个数组，它的一堆方法...

3b。其他人在检查什么？或者为什么会出现错误？

感谢您的任何意见，帮助我完全理解这个插件！

Answer 1

我不知道你对第一个问题的看法。但其他问题可以很容易解决。

首先，让我们去了3

你的代码，什么jQuery提供在他们的文档，仅仅是你和你的方法之间一种“吸气”的。与其将所有方法与名称空间聚集在一起，您将方法放入对象标题methods（它在您的第一个代码块的第二行实例化）。

如果您看看jQuery提供的代码，问，它不是返回方法，你曾想过，它的调用的关键在你methods对象的方法。第一，如果声明说，如果你打电话给你的插件（在你的情况，提示）与一个字符串变量，它会在方法对象中查找那个索引并且调用的函数。

第二否则，如果块说，如果你传递一个对象作为一个参数或没有参数，它会叫你的init方法。这有点像为你的插件定制的getter/initializer。

所以，现在回答你的第二个问题，初始化方法可以通过调用你的提示插件与访问..

1）没有参数

2）一个对象参数（通常选择如{"someOption":true,"anotherOption":400}）

3）字符串 '初始化' 为$('#id').tooltip('init')

这种方式，您也可以访问您的显示和隐藏方法...

$('#id).tooltip('hide') ...等等。

你可以在jQuery文档中阅读更多的细节。这只是我把它说成外行的条款。