Javascript 在jquery插件中定义选项的正确位置

我有一个jQuery插件，它使用名称空间（方法），还有一些默认选项，可以在初始化时重写

我想知道在名称空间中使用这个插件定义和使用选项的最佳方式是什么

我最初在包装器函数中使用

$.fn.dropIt.settings

来定义设置，但后来切换到在

init

方法中定义它们。然而，就范围而言，这是非常有限的

以下是我的插件中的相关代码

(function($, window, document, undefined){
  var methods = {
      init: function(options)
      {
        var settings = $.extend({
          trigger: "hover",
          animation: 'slide', /* none, slide, fade, grow */
          easing: 'swing', /* swing, linear, bounce */
          speedIn: 400,
          speedOut: 400,
          delayIn: 0,
          delayOut: 0,
          initCallback: function(){},
          showCallback: function(){},
          hideCallback: function(){}
        }, options);

        $(this).each(function(index, ele){
          $ele = $(ele);
          $ele.addClass('dropit');
          //Attach event handlers to each list-item
          $('li', $ele).dropIt('attach', settings);

          //If list is displayed veritcally, add extra left padding to all sub-menus
          if($(ele).hasClass('vertical'))
          {
            $('li', $ele).find('ul').addClass('nested sub-menu');
          } else {
            $('li ul', $ele).addClass('nested').find('ul').addClass('sub-menu');
          }
        });

        //Call custom callback
        settings.initCallback.call();

        //Return jQuery collection of lists
        return $(this);
      },

      attach: ...

      _trigger: ...

      _hide: ...

      }
    };

  $.fn.dropIt = function(method){
    //Variables and Options
    var $this = $(this);
    // 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.dropIt' );
    }
  };

})(jQuery, window, document);

看完页面后，我按照插件的结构基本上是这样的：

(function ($) {
    var defaults = {
        // set default options
    }
    // internal functions
    var methods = {
        // plugin methods
    }
    $.fn.pluginName = function (method) {
    }
})(jQuery);

(function($, window, document, undefined){
  var settings; //NOTE THIS LINE

  var methods = {
      init: function(options)
      {
        settings = $.extend({ //AND THIS LINE
          trigger: "hover",
          animation: 'slide', /* none, slide, fade, grow */
          easing: 'swing', /* swing, linear, bounce */
          speedIn: 400,
          speedOut: 400,
          delayIn: 0,
          delayOut: 0,
          initCallback: function(){},
          showCallback: function(){},
          hideCallback: function(){}
        }, options);

        $(this).each(function(index, ele){
          $ele = $(ele);
          $ele.addClass('dropit');
          //Attach event handlers to each list-item
          $('li', $ele).dropIt('attach', settings);

          //If list is displayed veritcally, add extra left padding to all sub-menus
          if($(ele).hasClass('vertical'))
          {
            $('li', $ele).find('ul').addClass('nested sub-menu');
          } else {
            $('li ul', $ele).addClass('nested').find('ul').addClass('sub-menu');
          }
        });

        //Call custom callback
        settings.initCallback.call();

        //Return jQuery collection of lists
        return $(this);
      },

      attach: ...

      _trigger: ...

      _hide: ...

      }
    };

  $.fn.dropIt = function(method){
    //Variables and Options
    var $this = $(this);
    // 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.dropIt' );
    }
  };

})(jQuery, window, document);

---

而且，像您一样，

$。扩展init方法中的默认值，但是为了清晰起见，我喜欢单独声明默认值。这对我来说一直很好。
我总是将设置对象设置为插件范围的全局变量，如下所示：

(function ($) {
    var defaults = {
        // set default options
    }
    // internal functions
    var methods = {
        // plugin methods
    }
    $.fn.pluginName = function (method) {
    }
})(jQuery);

(function($, window, document, undefined){
  var settings; //NOTE THIS LINE

  var methods = {
      init: function(options)
      {
        settings = $.extend({ //AND THIS LINE
          trigger: "hover",
          animation: 'slide', /* none, slide, fade, grow */
          easing: 'swing', /* swing, linear, bounce */
          speedIn: 400,
          speedOut: 400,
          delayIn: 0,
          delayOut: 0,
          initCallback: function(){},
          showCallback: function(){},
          hideCallback: function(){}
        }, options);

        $(this).each(function(index, ele){
          $ele = $(ele);
          $ele.addClass('dropit');
          //Attach event handlers to each list-item
          $('li', $ele).dropIt('attach', settings);

          //If list is displayed veritcally, add extra left padding to all sub-menus
          if($(ele).hasClass('vertical'))
          {
            $('li', $ele).find('ul').addClass('nested sub-menu');
          } else {
            $('li ul', $ele).addClass('nested').find('ul').addClass('sub-menu');
          }
        });

        //Call custom callback
        settings.initCallback.call();

        //Return jQuery collection of lists
        return $(this);
      },

      attach: ...

      _trigger: ...

      _hide: ...

      }
    };

  $.fn.dropIt = function(method){
    //Variables and Options
    var $this = $(this);
    // 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.dropIt' );
    }
  };

})(jQuery, window, document);

编辑：
您还可以执行
$（this）.data（'youPlugInName'，settings）
，如果您想在以后更改它，您可以从
data（'youPlugInName'）
中检索它，并更新您想要的任何属性。
如果这些属性是全局定义的，则多次调用插件会在第一次调用时保留任何选项设置。如果我通过一次对插件的调用将动画设置为“淡入淡出”，然后在其他元素上再次初始化，动画仍然设置为“淡入淡出”。请注意我的编辑@ChristianBenincasa-您尝试过这种方法吗？你怎么认为？