0

我正在学习有关 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.你如何初始化这个插件？当我尝试运行随机 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。为什么 write methods[method]// 看起来 [method] 是一个数组，这让我很困惑，因为我没有看到一个数组，它是一堆方法......

3b。else 检查的是什么？或者为什么会发生错误？

感谢您提供有关帮助我完全理解此插件的任何建议！

4

1 回答 1

1

我不知道你第一个问题是什么意思。但是其他问题可以很容易地解决。

首先，让我们回顾一下 3。

你拥有的代码，以及 jQuery 在他们的文档中提供的，只是你和你的方法之间的一种“getter”。不是用所有方法聚集命名空间，而是将方法放入对象标题methods中（在第一个代码块的第二行实例化。

如果您查看您所询问的 jQuery 提供的代码，它并没有像您想象的那样返回方法。它调用对象中键的方法。第一个 if 语句表示，如果您使用字符串methods变量调用插件（在您的情况下为工具提示），它将在方法对象中查找该索引并调用函数。

第二个else if块表示，如果您将对象作为参数传递或不传递参数，它将调用您的init方法。这有点像为您的插件自定义构建的 getter/initializer。

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

1) 无参数

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

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

这样，您还可以使用...访问您的显示和隐藏方法

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

您可以在 jQuery 文档中阅读更多详细信息。这只是我通俗地说。

于 2012-09-19T17:20:08.403 回答