1

JQuery插件创作文档中的默认和选项部分，说包括这样的设置：

(function( $ ){

  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

    });

  };
})( jQuery );

但是再往下看，就像在数据部分一样，构建插件的方式发生了变化，并且不清楚如何声明和初始化设置。

他们会像这样被扔进 init 方法吗？如果是这样，另一种方法如何访问它们？

  var methods = {
    init: function(options) {

      // no idea if this is the right place for settings
      var settings = $.extend({}, $.fn.myPlugin.defaultSettings, options || {});

      return this.each(function() {
       ....
      });
    },
    displaySettings: function() {
      console.log('WTF to do?');
    }
  ...
4

3 回答 3

0

我会看看这篇文章：jQuery Plugin Design Patterns

还有一个随附的 Github 存储库，其中包含所有示例。

于 2012-12-18T22:17:11.843 回答
0

这条线可能是您正在寻找的。它检查方法是作为参数传递还是作为带有选项的对象传递。

if ( methods[method] ) { //Check if a method was passed
    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) { // Check if options were passed
    // If Options passed, apply them to the .init method where it accepts arguments. 
    // In the example it doesn't show the init method utilizing the options.
    return methods.init.apply( this, arguments ); 
} else {
    $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
}

如果传递了选项，那么您将在 init 方法中使用上面相同的代码：

var methods = {
    init: function(options) {
        var settings = $.extend( {
            'location'         : 'top',
            'background-color' : 'blue'
        }, options);
...

您通常“初始化”一个插件作为您的第一种方法，因此可以选择。通常，您不会使用“destroy”之类的方法传递选项。

于 2012-12-18T22:20:17.737 回答
0

这对我有用：

(function ( $ ) {
    var methods = {
        init : function(options) {
            var settings = $.extend({
                some_setting: true
                ,some_other_setting: true
            }, options );

            var _this = this;
            _this[0].pluginNameSettings = settings;
            // rest of your init method here
        } // end of init method
        ,some_method: function( ) {
            $(this)[0].pluginNameSettings.some_setting;
            // rest of your method here
        }
    }

    $.fn.dropDownMenu = function(methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[ methodOrOptions ].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || ! methodOrOptions) {
            // Default to "init"
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  methodOrOptions + ' does not exist on jQuery.dropDownMenu');
        }
    };
}( jQuery ));
于 2013-07-17T02:41:40.757 回答