尝试学习jQuery插件开发

Question

所以我正在尝试学习如何基于此示例为插件实现方法集合：http://docs.jquery.com/Plugins/Authoring

我无法理解的是如何将使用插件默认值扩展的选项发送到各个方法。

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

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

Answer 1

看起来我之前的答案比我之前想象的更接近分数。

是的，这一行正在传递参数：

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

使用.apply()，您可以调用一个方法，更改其上下文（this 值），并为其提供一组参数而不是单个参数。如果您不知道如何传递参数，这很方便。

所以你可以像这样分解上面的行：

  // 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" 传递剩余参数的数组。

Answer 2

你使用$.extend(existingObject || {} (new object), oneObject, secondObject, nthObject)

var mydefaults = { myDefaultArg : "foo" }
var inputOptions = { myDefaultArg : "Somethin else" }

var options = $.extend({}, mydefaults, inputOptions);

options.myDefaultArg == "Somethin else";

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

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

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

并检索它

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