jquery 命名空间：如何将默认选项从一种方法传递给子序列方法？

Posted 2023-02-22

【中文标题】jquery 命名空间：如何将默认选项从一种方法传递给子序列方法？

【英文标题】：jquery namespace: how to pass default options from one method to the subsequence methods?

【发布时间】：2012-12-10 02:17:05

【问题描述】：

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

例如，我在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 );

reference

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

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

但是，

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

我希望得到true 作为答案，因为init 正在访问show。那么如何从方法访问其他方法？

【参考方案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');​

【讨论】：

感谢您的回答。我没有制作任何小部件。我只是想学习在插件中使用命名空间，但如果我想在方法之间共享一些基本的默认设置，命名空间似乎非常困难。另一个麻烦是 - 我如何在另一个方法中调用一个方法？如果我只是坚持使用基本插件，那么我没有这样的问题......

不要让widget这个词欺骗了你。小部件只是一个插件，与您正在构建的完全一样。但是小部件工厂具有内置的可扩展性——解决了您将要面临的许多问题。如果你想让我告诉你如何让你的代码工作，我可以做到，但如果你真的对插件创作感兴趣，我强烈推荐小部件。我可以为您提供任何一个/两个方面的帮助——只要让我知道您对哪个方向感兴趣即可。

您的编辑看起来不错。缺少关于可链接性的部分，大多数插件消费者都希望插件能够做到这一点。

javascript 并不真正支持命名空间。不同的开发人员设计了不同的方法来模仿它们——有些方法比其他方法更成功。当然，每个人对各种方法都有自己的看法。如果您想了解使用 jQuery UI Widget Factory 的基础知识，我创建了一个简单的小部件 -- JSFiddle

这些是小部件工厂的一部分。我为 *** 创建了一个关于使用工厂创建小部件的常见问题解答。如果它被发布，我会把链接发给你。