3

如何将默认选项从一种方法传递给子序列方法？

例如，我在方法中有一些默认设置init。我想将这些设置用于其他方法，例如show，

(function($) {
    var methods = {
        init: function(options) {
            var defaults = {
                element:    "selection"
            }

            var options =  $.extend(defaults, options);
            var o = options;

            alert(o.element);
        },
        show: function(o) {
            alert(o.element);
        },
        hide: function() {
            alert(o.element);
        }
    };

 $.fn.plugin = 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 );

var blah = $('#hello').plugin('show'); // TypeError: o is undefined

我想得到selection答案……有可能吗？

编辑：

(function($) {

    $.fn.plugin = 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' );
        }    

     }; 

     $.fn.plugin.defaults = {
        attr: 'checked',
        expected: true,
        onChange: function(){}
      }; 

    var methods = {

        init: function(options) {
            var options = $.extend({}, $.fn.plugin.defaults, options);
            var o = options;

            var $this = this;

            $this.show();
            //alert(o.attr);
        },
        show: function(options) {

            var options = $.extend({}, $.fn.plugin.defaults, options);
            var o = options;

            alert(o.expected);
        },
        hide: function(object) {
            alert(o.element);
        }
    };


})( jQuery );

参考

var blah = $('#hello').plugin('show',{expected:"#hello world"});

现在我得到#hello world（正确）

但，

var blah = $('#hello').plugin('init'); // returns nothing

我想得到true答案，因为init正在访问show. 那么如何从一个方法访问其他方法呢？

4

1 回答 1

1

在我看来，您正在尝试重新发明可扩展的 jquery 插件（又名 jQuery UI 小部件）。我可以向您介绍很多如何完成您正在尝试做的事情，但这确实是在重新发明轮子。jQuery UI Widget Factory 非常适合这种类型的东西。

jQuery Widget Factory——这是他们的旧文档，但它比其他任何东西都更好地概述了小部件工厂，恕我直言。他们在 1.9/1.10 中对其进行了一些小改动，但大部分概念仍然相同。

编辑

这是我对您的代码的修改。我相信这可以满足您的需求。

(function($) {
    var methods = {
        init: function(options) {
            var defaults = {
                element:    "selection"
            }

            this.options =  $.extend(defaults, options);

            alert("init: " + this.options.element);
        },
        show: function() {
            alert("show: "  + this.options.element);
        },
        hide: function() {
            alert("hide: " + this.options.element);
        }
    };

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

})( jQuery );

var blah = $('#hello').plugin('init').plugin('show');​
于 2012-12-23T02:58:10.600 回答