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

Question

Say I have the following plugin, enclosed within an immediately invoked function expression:

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

How do I give my array $.fn.someFunc.defaults access to my $self variable? Say I want to set the default value of $.fn.someFunc.defaults.property.prop to something that is dependent on some intrinsic property of the element the plugin has been provided access to? Such as:

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

Attempting to do so currently results in a ReferenceError: $self is not defined error. Any ideas?

Answer 1

You cannot do it this way. Because $self is a variable local to someFunc , you need to pass it to defaultoptions .

Try this:

Make your default option as function

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

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

Answer 2

What you are NOT doing is exposing your $self object by returning a reference to $(this) object from your extension function

Try adding return $self

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

This is how plug-ins allow for chaining and access to manipulated data / elements.

Answer 3

I don't think you can. $self (and the this that it's from) is only defined when the function is called which is sensible because it can vary depending what you call the function on.

You're defining the defaults outside the function and so this isn't known, it's also evaluated at this point. What you want to do is ideally only have the variable evaluated later during the function. There are ways to do that but they're going to overly complicate things for someone coming along and trying to change the defaults later.

There are a couple of simple options, either define those defaults inside the function

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

Someone can still override that default outside (you'll need to document that this is possible) but they can't do something that depends on accessing $self .

Alternatively -- if the value is related to something concrete like width -- you could process it internally, so allow values such as '100px' for an absolute value and '90%' uses 90% of the width of $self . You'd detect this inside the plugin and derive the correct value.

Answer 4

Such information should not be stored in the options array. Options are meant for configuration. You shouldn't need your DOM element to fill those default options.

Try this jQuery plugin boilerplate:
https://github.com/guidobouman/jquery-plugin-boilerplate

A rather popular jQuery plugin is based on that boilerplate:
https://github.com/guidobouman/jquery-panelsnap

That plugin picks up on the CSS styling and stores that value. This way a user can style his content, and the plugin picks up on that. Configuring the width of a plugin within javascript is bound to give issues. Styling belongs within CSS.

Javascript: Function, CSS: Style

Disclaimer:
The links provided point to code written by me.

Edit:
If you want to get specific data from your element I'd store that in a different property in your plugin. To get all data- based attributes from your DOM element use the following:

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

  element_data = $self.data();

  // More code here

  return $self;
}

NB: I did not correct the linting errors in your code.

Answer 5

You are returning the wrong object ( $(this) ). In other words you are returning a jquery object wrapped inside another jquery object. You should be returning this instead.

Make the following modification to the somFunc function:-

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

I think that should fix the problem.