如何让我的默认属性数组访问插件中传递的jQuery对象？

Question

说我有以下插件，包含在立即调用的函数表达式中：

$.fn.someFunc = function(tags, options) {
    // Containing element
    $self = $(this);
    opts = $.extend({}, $.fn.someFunc.defaults, options);

    // More code here

    return $self;
}

$.fn.someFunc.defaults = {
    property: { prop: value, prop2: value2 },
    anotherProp : { prop: value, prop2: value2 }
}

如何为数组$.fn.someFunc.defaults访问$self变量？ 假设我想将$.fn.someFunc.defaults.property.prop的默认值设置为取决于插件已提供访问权限的元素的某些固有属性？ 如：

$.fn.someFunc.defaults = {
    property: { prop: $self.width(), prop2: value2 }, // This currently does not work
    anotherProp : { prop: value, prop2: value2 }
}

目前尝试这样做会导致ReferenceError: $self is not defined错误。 有任何想法吗？

Answer 1

您无法以这种方式这样做。 因为$self是someFunc局部变量，所以您需要将其传递给defaultoptions 。

尝试这个：

将默认选项设置为功能

$.fn.someFunc.defaults = function(){

return  { property: { prop: this.width(), prop2: value2 }, // This currently does not work
anotherProp : { prop: value, prop2: value2 }};
}

Answer 2

你不这样做是暴露你的$self通过返回参考对象$(this)从你的扩展函数对象

尝试添加return $self

$.fn.someFunc = function(tags, options) {
    // Containing element
    $self = $(this);
    opts = $.extend({}, $.fn.someFunc.defaults, options);
    return $self;
}

这就是插件如何允许链接和访问操纵的数据/元素的方式。

Answer 3

我认为你不能。 $self （与this ，它来自的）当函数被调用这是明智的，因为它可以根据你所说的功能有所不同才被定义。

你定义的默认功能之外，所以this是不知道，它也是在这一点上进行评估。 理想情况下，您只想在函数执行过程中对变量进行求值。 有很多方法可以做到，但是对于那些后来尝试更改默认值的人来说，它们会使事情变得过于复杂。

有几个简单的选项，可以在函数中定义这些默认值

$.fn.someFunc = function(tags, options) {
    // Containing element
    $self = $(this);
    derived_defaults = {
       property: { prop: $self.width() }
    };
    opts = $.extend(true, derived_defaults, $.fn.someFunc.defaults, options);

    // More code here

    return $self;
}

$.fn.someFunc.defaults = {
    property: { prop2: value2 }, // This currently does not work
    anotherProp : { prop: value, prop2: value2 }
}

有人仍然可以在外部覆盖该默认值（您需要证明这是可能的），但他们不能做依赖于访问$self事情。

另外，如果该值与诸如width之类的具体东西有关，则可以在内部进行处理，因此允许诸如'100px'的值作为绝对值，而'90％'则使用$self宽度的90％。 您将在插件中检测到此错误并得出正确的值。

Answer 4

此类信息不应存储在options数组中。 选项用于配置。 您不需要DOM元素来填充这些默认选项。

试试这个jQuery插件样板：
https://github.com/guidobouman/jquery-plugin-boilerplate

一个相当流行的jQuery插件基于该样板：
https://github.com/guidobouman/jquery-panelsnap

该插件采用CSS样式并存储该值。 这样，用户就可以设置其内容的样式，然后插件就会开始处理。 在javascript中配置插件的宽度必然会引起问题。 样式属于CSS。

Javascript：函数，CSS：样式

免责声明：
提供的链接指向我编写的代码。

编辑：
如果您想从元素中获取特定数据，则可以将其存储在插件的其他属性中。 要从DOM元素获取所有基于data-的属性，请使用以下命令：

$.fn.someFunc = function(tags, options) {
  // Containing element
  $self = $(this);
  opts = $.extend({}, $.fn.someFunc.defaults, options);

  element_data = $self.data();

  // More code here

  return $self;
}

注意：我没有纠正代码中的掉毛错误。

Answer 5

您返回了错误的对象（ $(this) ）。 换句话说，您将返回包装在另一个jquery对象中的jquery对象。 您应该返回this 。

对somFunc函数进行以下修改：

$.fn.someFunc = function(tags, options) {
// Containing element
// $self = $(this);
// Note i have commented out the above line.
$self = this;
opts = $.extend({}, $.fn.someFunc.defaults, options);

// More code here

return $self;
}

我认为那应该解决问题。