我正在开发一个 jQuery 插件。当插件运行时，它做的第一件事就是确定它的设置。它通过采用一些默认设置并使用用户传入的任何内容覆盖其中的部分或全部来实现此目的。

这是一个简化的版本:

(function( $ ) {
  $.fn.somePlugin = function(userOptions) {
    // Short name for internal use - exposed below for external modification
    var defaults = $.fn.somePlugin.defaults;

    // Decide settings
    // User settings overrule defaults, but merge both into an empty 
    // hash so that original defaults hash isn't modified
    var settings = $.extend(true, {}, defaults, userOptions);

    settings.alerter.call();

    // More code, etc.
  }

  $.fn.somePlugin.defaults = {
    name: 'Captain Slappy von Martinez, Esquire, DDS',
    favoriteColor: 'red',
    alerter: function(){alert("I got bones!");}        
  }
  
})( jQuery );

所以，如果你这样调用插件:

    $('div').somePlugin({alerter: function(){alert('No bones here!');}});

...您覆盖默认的 alerter 函数，但使用默认的 favoriteColor。

我在插件本身之外定义默认值，以便可以公开访问它们。因此，如果您想更改 favoriteColor 的默认 值，您可以这样做:

$.fn.somePlugin.defaults.favoriteColor = 'blue';

... 之后页面上的每个实例都会更改它。

所有这些工作正常。

这是我的问题:在其中一个默认功能中，我需要引用settings。像这样:

  $.fn.somePlugin.defaults = {
    name: 'Captain Slappy von Martinez, Esquire, DDS',
    favoriteColor: 'red',
    alerter: function(){alert("Paint me " + settings.favoriteColor);}        
  }

但是当我尝试这样做时，我在声明默认警报器函数的行上收到一个 Javascript 错误:“未定义设置。”确实如此:当解析器命中该行时，它还没有定义。它将在函数运行时定义，但这似乎无关紧要。

所以我的问题是:如何将我的默认函数导入到插件中，使其可以访问settings？

• 有没有办法将 settings 的评估延迟到实际调用该函数之前？
• 如果是这样，有没有办法确保它可以访问插件的本地范围，即使我假设，作为一个对象，这个函数是通过引用传递的？我知道我可以通过使用 someFunction.call(valueToUseForThis) 改变函数内部 this 的值，但我不知道我是否可以在事实上。

一些不起作用的东西

• 最初，似乎如果我在外部自执行函数中声明 settings，就可以使用默认设置。但是在那里声明它会导致问题:如果我在一个页面上多次使用我的插件，实例的设置就会混淆。

最佳答案

任何事后更改范围的尝试都注定要失败。 JavaScript 中没有动态作用域。

解决方法 1. 将设置显式传递给警报器:

$.fn.somePlugin = function(userOptions) {
  var settings = $.extend(...);
  settings.alerter(settings)
}

$.fn.somePlugin.defaults = {
  favoriteColor: 'red',
  alerter: function(settings) { alert("Paint me " + settings.favoriteColor) }
}

解决方法 2. 将设置隐式传递给警报器:

$.fn.somePlugin = function(userOptions) {
  var settings = $.extend(...);
  settings.alerter()
}

$.fn.somePlugin.defaults = {
  favoriteColor: 'red',
  alerter: function() { alert("Paint me " + this.favoriteColor) }
}

这两种解决方案都经过测试，并且可以很好地与插件的多次使用配合使用。如果您不打算在警报器中使用 this 关键字，则可以将其用于引用设置。

您和 fudgey 提到的第三个有效解决方案是将设置对象附加到 DOM 元素本身:

$.fn.somePlugin = function(userOptions) {
  var settings = $.extend(...);
  $(this).data('somePlugin', {settings: settings})
  settings.alerter.call(this)
}

$.fn.somePlugin.defaults = {
  favoriteColor: 'red',
  alerter: function() {
      alert("Paint me " + $(this).data('somePlugin').settings.favoriteColor)
  }
} 

额外的乐趣。模拟动态作用域，a.k.a 不要这样做

function dynamic(fn) {
  var parts = fn.toString().split('{')
  fn = parts.shift() + '{ with (args) { ' + parts.join('{') + '}'
  return {bind: function(args) { return eval('(' + fn + ')') }}
}

a = b = c = 0

function adder(c) {
  alert(a + b + c)
}

dynamic(adder).bind({a: 1, b: 2})(3) // alert(6)

在插件中的使用:

$.fn.somePlugin = function(userOptions) {
  var settings = $.extend(...);
  dynamic(settings.alerter).bind({settings: settings})()
}

$.fn.somePlugin.defaults = {
  favoriteColor: 'red',
  alerter: function() { alert("Paint me " + settings.favoriteColor) }
}

关于javascript - 如何让插件的默认设置访问最终设置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5015838/