jQuery - 插件选项默认扩展（）答案

【问题标题】：jQuery - plugin options default extend()jQuery - 插件选项默认扩展（）
【发布时间】：2012-04-03 14:30:31
【问题描述】：

按照良好的jQuery Plugins/Authoring 说明我有一个小问题

(function($){

  // Default Settings
  var settings = {
    var1: 50
  , var2: 100
  };

  var methods = {
    init : function (options) {
      console.log(settings);
      settings = $.extend(options, settings); // Overwrite settings
      console.log(settings);
      return this;
    }
  , other_func: function () {
      return this;
    }
  };

  $.fn.my_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.my_plugin');
    }    
  };

})(jQuery);

如果我这样做

>>> $('my_element').my_plugin({var3: 60})
Before Object { var2=100, var1=50}
After Object { var3=60, var2=100, var1=50}
[ my_element ]

>>> $('my_element').my_plugin({var1: 60})
Before Object { var1=50, var2=100}
After Object { var1=50, var2=100}
[ my_element ]

为什么我的var1 没有被覆盖？

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

你混淆了$.extend中参数的顺序（目标应该是第一个），它应该是：

settings = $.extend(settings, options);

见 this fiddle 和 docs for $.extend()

为避免混淆，您还可以使用默认设置扩展设置，如下所示：

methods.init = function(options){

  var settings = $.extend({
    key1: 'default value for key 1',
    key2: 'default value for key 2'
  }, options); // <- if no / undefined options are passed extend will simply return the defaults

  //here goes the rest

};

【讨论】：

【解决方案2】：

您正在覆盖您的默认设置。尝试创建一个新变量来存储 init 方法中的设置。

  var defaults = {
    var1: 50
  , var2: 100
  };

  var methods = {
    init : function (options) {
      console.log(defaults);
      var settings = $.extend({},defaults,options || {});
      console.log(settings);
      $(this).data("myPluginSettings",settings);
      return this;
    }
  , other_func: function () {
      console.log(this.data("myPluginSettings"));
      return this;
    }
  };

【讨论】：