我怎么能给我的属性的默认数组访问传入的jQuery对象在我的插件

How can I give my default array of properties access to the passed jQuery object in my plugin?

本文关键字：我的 jQuery 插件 对象 数组 怎么能 属性 默认 访问      更新时间：2023-09-26

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

$.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错误。什么好主意吗?

你不能这样做。由于$self是someFunc的局部变量，因此需要将其传递给defaultoptions。

试试这个:

设置默认选项为function 

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

NOT正在做的是通过从扩展函数返回对$(this)对象的引用来暴露$self对象

尝试添加return $self 

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

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

我认为你做不到。$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的事情。

或者——如果这个值与一些具体的东西有关，比如宽度——你可以在内部处理它，所以允许像'100px'这样的值作为绝对值，'90%'使用$self的90%的宽度。您可以在插件中检测到这一点，并派生出正确的值。

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

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

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

该插件获取CSS样式并存储该值。通过这种方式，用户可以为他的内容设置样式，而插件也可以选择。在javascript中配置插件的宽度必然会产生问题。样式属于CSS。

Javascript: Function, CSS: Style

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

编辑:
如果你想从元素中获得特定的数据，我会将其存储在插件的不同属性中。要从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;
}

注意:我没有纠正你代码中的linting错误。

您正在返回错误的对象($(this))。换句话说，您返回的是封装在另一个jquery对象中的jquery对象。您应该返回this。

对somfunction做如下修改:-

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

我想这应该能解决问题。

相关文章：