Javascript 尝试学习jQuery插件开发

因此，我试图学习如何基于以下示例实现插件的方法集合：

我无法理解的是，插件默认扩展的选项是如何发送到各个方法的

我很确定任何原始选项都会发送到此处的方法：

return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

那么，如何用默认值扩展这些参数呢？这个例子并没有真正定义如何做到这一点

var methods = {
      init : function( options ) {

           return this.each(function(){
               $(window).bind('resize.tooltip', methods.reposition);
           });

       }
}

此外，以下是示例插件创作页面中的代码：

    (function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { // ... },
     show : function( ) { // ... },
     hide : function( ) { // ... },
     update : function( content ) { // ...}
  };

  $.fn.tooltip = function( method ) {

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

您可以使用

$.extend（现有对象| |{}（新对象）、oneObject、secondObject、nthObject）

要访问或保存数据，可以使用data方法

因此，如果您在插件中，“this”是jquery元素，您现在可以将数据保存到其中

$(this).data("pluginname.somedataname", data);

然后重试

var data = $(this).data("pluginname.somedataname");

---

看起来我之前的回答比我之前认为的更接近于我的目标

是，此行正在传递参数：

return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

使用

.apply（）

，您可以调用一个方法，更改其上下文（

此

值），并为其提供一组参数，而不是单个参数。如果您不知道需要如何传递参数，则使用方便

因此，您可以像这样分解上面的行：

  // reference the arguments passed to the plugin
var args = arguments;

  // eliminate the first one, since we know that's just the name of the method
args = Array.prototype.slice.call( arguments, 1 )

  // call the method that was passed, 
  //    passing along the Array of the arguments (minus the first one),
return methods[method].apply( this, args);

// Note that it is being called from the context of "this" which is the jQuery object

$('.someElem').tooltip('destroy', 'someArg', 'anotherArg' );

因此，如果插件是这样调用的：

  // reference the arguments passed to the plugin
var args = arguments;

  // eliminate the first one, since we know that's just the name of the method
args = Array.prototype.slice.call( arguments, 1 )

  // call the method that was passed, 
  //    passing along the Array of the arguments (minus the first one),
return methods[method].apply( this, args);

// Note that it is being called from the context of "this" which is the jQuery object

$('.someElem').tooltip('destroy', 'someArg', 'anotherArg' );

---

代码将找到

“destroy”

方法，从Arguments对象中切出

“destroy”

，并调用

“destroy”

，传递剩余参数数组。

对，我了解如何使用extend函数。我可能没有问得那么好。我的问题更多的是如何从最初的$（'el'）。工具提示（选项）中传递选项，以及如何从“方法”文本中访问它们。是的！肯定是我想知道的一部分。因此，剩下的唯一一件事就是何时使用插件设置的默认值扩展传入的选项（参数）。我希望这不会发生在init方法中，但是如果发生了，那么如何在文本中的其他方法中访问它呢？@Jeff：这完全取决于插件。您需要分别对待每个方法，并决定它是否需要接受参数（或单个选项参数），以及是否应该具有默认值。因此，如果

init

具有默认选项是有意义的，就在那里执行。如果其他任何方法需要它们自己的任何类型的参数，它们将接受它们自己的参数。这就是你的意思，还是我走错了方向？…我想补充一点，教程给出了一个开发插件的特定模式的示例。这不是唯一的方法，但这是一个很好的方法，这样，如果你有几个方法需要调用，你就可以在一个插件下给它们命名了。@patrick dw。好的，我明白了。我确实让我的小插件工作了。我想我做的太多了。通常情况下，如果你不知道如何使某件事起作用，你就错了。但是你的评论是非常宝贵的，因为我对jQuery插件的工作原理有了更多的了解。谢谢@帕特里克·德瓦：谢谢你的介绍，这正是我需要知道的。