CODEWITHSUNDEEP
jqueryobjectparallax
Tenali_raman
Tenali_raman

Reputation: 2192

understanding a function in a Jquery plugin

There is this following snippet of code from a parallax Jquery pluggin : 

function Plugin( element, options ) {
    this.element = element;
    this.$element = $(this.element);

    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
}

The plugin can be found on github : git link

now there are 2 really confusing line : 

    this.element = element;
    this.$element = $(this.element);

what i understand is : the value passed to the function Plugin is stored in this.element in the 1st line , now why on the 2nd line is the author adding another variable this.$element and passing the value of $(this.element) to it . ? what's the purpose ?

on asking one of my senior colleagues i got the following answer : this.element = element is setting the element property of whatever object "this" refers to. It is setting it to the value that is held by the variable element.

this.$element = $(this.element) is setting the value of the $element property of the same object. In this case it is setting it to the jQuery object.

But still i don't get what the 2 lines of code are doing .

Also , could't those lines of code I.E. : 

this.element = element;
this.$element = $(this.element);

be re-written as : 

this.$element = element; ??

i tried doing that , and the plugin would't work .

Thank you.

Tenali .

Upvotes: 2

Views: 63

Answers (3)

Ehtesham
Ehtesham

Reputation: 2985

So the Plugin is a constructor and element is being passed t it as a parameter.

What these two lines are doing is saving a reference to the HTML element and in second line author is saving reference to the jQuery object to avoid creating it again, so it's kind of cache.

this.element = element; // save reference to the HTML element
this.$element = $(this.element); // save reference to the jQuery object

$ in this.$element is added as an identifier, so when any body would see later they would know by the presence of $ that this object is reference to jQuery object, which is a common pattern.

this.element won't work as this is carrying an element not jQuery object and element passed to constructor is also an HTML element.

If you want to get rid of second line, you would need to pass jQuery object in constructor. So e.g. at the end where plugin is being instantiated you can do following... Notice the this is wrapped in $.

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (!$.data($(this), 'plugin_' + pluginName)) {
            $.data($(this), 'plugin_' + pluginName, new Plugin($(this), options ));
        }
    });
};

Upvotes: 1

David Barker
David Barker

Reputation: 14620

The author of the plugin is caching the DOM element and a jQuery representation of that element for ease and efficiency.

// Normal DOM node
this.element = element

// jQuery wrapped DOM node
this.$element = $(this.element);

Within the plugins prototype or private functions, instead of creating a brand new jQuery object (that is inefficient) there is one already available within this.$element that can be used wherever. It also means that you can change the node associated with this.element and have that change propagated throughout the code.

Upvotes: 1

Xavier Delamotte
Xavier Delamotte

Reputation: 3599

function Plugin( element, options ) is most likely a javascript constructor and will be used like that:

var plugin = new Plugin(myDiv, options);

this will then be a reference to the new object created. (the plugin object in my example)

In this context: element would be a reference to any DOM element passed to the Plugin constructor and $(element) would be the jQuery selector for this dom element, on which jQuery functions may be called.

Upvotes: 1

Related Questions