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个问题...... 你怎么初始化这个插件？当我尝试运行一个随机的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对象中键的方法。第一个if语句说如果你使用 string 变量调用你的插件（在你的情况下，工具提示），它将在methods对象中查找该索引并且调用功能。

第二个 else if 块表示如果将对象作为参数或没有参数传递，它将调用 init 方法。这有点像为您的插件定制的getter /初始化器。

现在，要回答第二个问题，可以通过调用工具提示插件来访问 init 方法。

1）没有参数

2）一个对象参数（通常是诸如{"someOption":true,"anotherOption":400}之类的选项）

3）字符串'init'，如$('#id').tooltip('init')

通过这种方式，您还可以使用...

访问 show 和隐藏方法

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

您可以在jQuery文档中阅读更多详细信息。这只是我用外行的话来说。

学习和扩展jquery插件

1 个答案: