Javascript 如何在插件中为传递的jQuery对象提供默认属性数组访问权限？

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

$.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未定义
错误。有什么想法吗？
你现在没有做的是通过从扩展函数返回对
$（this）
对象的引用来暴露你的
$self
对象

尝试添加
返回$self

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

这就是插件允许链接和访问被操纵的数据/元素的方式。
您不做的是通过从扩展函数返回对
$（This）
对象的引用来公开您的
$self
对象

尝试添加
返回$self

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

这就是插件允许链接和访问被操纵的数据/元素的方式。
我认为您不能
$self
（以及它来自的
此
）仅在调用函数时定义，这是合理的，因为它可以根据调用函数的内容而变化

您在函数外部定义默认值，因此
此
未知，此时也会对其进行评估。理想情况下，您只需要在函数执行过程中对变量进行评估。有很多方法可以做到这一点，但是如果有人出现并试图在以后更改默认值，它们会使事情变得过于复杂

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

$.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 }
}

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

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

有些人仍然可以在外部覆盖该默认值（您需要记录这是可能的），但他们无法执行依赖于访问
$self
的操作

或者，如果该值与某个具体值（如宽度）相关，则可以在内部对其进行处理，因此允许将“100px”等值作为绝对值，“90%”使用
$self
宽度的90%。您可以在插件中检测到这一点，并得出正确的值
 我认为你做不到
$self
（以及它来自的
此
）仅在调用函数时定义，这是合理的，因为它可以根据调用函数的内容而变化

您在函数外部定义默认值，因此
此
未知，此时也会对其进行评估。理想情况下，您只需要在函数执行过程中对变量进行评估。有很多方法可以做到这一点，但是如果有人出现并试图在以后更改默认值，它们会使事情变得过于复杂

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

$.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 }
}

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

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

有些人仍然可以在外部覆盖该默认值（您需要记录这是可能的），但他们无法执行依赖于访问
$self
的操作

或者，如果该值与某个具体值（如宽度）相关，则可以在内部对其进行处理，因此允许将“100px”等值作为绝对值，“90%”使用
$self
宽度的90%。您可以在插件中检测到这一点，并得出正确的值
 您返回了错误的对象（
$（this）
）。换句话说，您将返回一个包装在另一个jquery对象中的jquery对象。您应该返回
此

对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;
}

我认为这应该可以解决问题。
您返回了错误的对象（
$（this）
）。换句话说，您将返回一个包装在另一个jquery对象中的jquery对象。您应该返回
此

对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;
}

我认为这应该可以解决问题。
此类信息不应存储在选项数组中。选项用于配置。您不应该需要DOM元素来填充这些默认选项

试试这个jQuery插件样板：


一个相当流行的jQuery插件就是基于这个样板：


该插件采用CSS样式并存储该值。通过这种方式，用户可以设计其内容的样式，而插件将以此为基础。在javascript中配置插件的宽度必然会带来问题。样式属于CSS

Javascript:Function，CSS:Style

免责声明：

提供的链接指向我编写的代码

编辑：

如果您想从元素中获取特定数据，我会将其存储在插件的不同属性中。要从DOM元素中获取所有基于
数据的属性，请使用以下命令：

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

  element_data = $self.data();

  // More code here

  return $self;
}

注意：我没有更正代码中的linting错误。
此类信息不应存储在选项数组中。选项用于配置。您不应该需要DOM元素来填充这些默认选项

试试这个jQuery插件样板：


一个相当流行的jQuery插件就是基于这个样板：


该插件采用CSS样式并存储该值。通过这种方式，用户可以设计其内容的样式，而插件将以此为基础。在javascript中配置插件的宽度必然会带来问题。样式属于CSS

Javascript:Function，CSS:Style

免责声明：

提供的链接指向我编写的代码

编辑：

如果您想从元素中获取特定数据，我会将其存储在插件的不同属性中。要从DOM元素中获取所有基于
数据的属性，请使用以下命令：

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

  element_data = $self.data();

  // More code here

  return $self;
}

注意：我没有更正代码中的linting错误<