jQuery options object reference

Question

When dealing with jQuery options object, should I reference the "global" ResponsiveMenu every time or create a "local" copy of the option I need in each module?

Have a look at the code and let me know which you think is best and why, or if it even matters at all. The way I've been doing it is: if I use the reference more than once, I make a "local" copy. If I only use it once, I'll reference the "global" one.

ResponsiveMenu = {

    init: function(options, elem) {
        this.options = $.extend( {}, this.options, options );
        this.elem = $(elem);

        this.bindEvents();

        return this;
    },

    options: {
        trigger: null,
        activeClass: 'active',
        submenuTrigger: $('.sub-toggle')
    },

    bindEvents: function() {
        var self = this;

        this.options.trigger.on('click', triggerMain(evt, self));
    },

    triggerMain: function(evt, self) {
        evt.preventDefault();

        var activeClass = self.options.activeClass;

        self.elem.toggleClass(activeClass);
        self.options.trigger.toggleClass(activeClass); //"Global" reference

    },
}

OR this:

bindEvents: function() {
    var self = this,
        trigger = this.options.trigger; //"Local" copy

    trigger.on('click', triggerMain(evt, self, trigger));
},


triggerMain: function(evt, self, trigger) {
    evt.preventDefault();

    var activeClass = self.options.activeClass;

    self.elem.toggleClass(activeClass);
    trigger.toggleClass(activeClass);

},

Your strategy ("if used multiple times, dereference to local variable") is fine. Yet, the only difference between your two codes seems to be the additional parameter to triggerMain and has not much to do with your question? — Bergi
– Bergi, Commented Sep 9, 2013 at 15:57
To me it looks like it's totally the same for a small number of references to the global variable. You won't really see any performance changes (or memory waste anyway) by deferencing to local variables if the number of times you use the global variable is small (like in the provided example). — whatyouhide
– whatyouhide, Commented Sep 9, 2013 at 15:58
Also notice that the on method expects a plain function for the handler argument, you are already calling it (and passing the result of the invocation). — Bergi
– Bergi, Commented Sep 9, 2013 at 15:59
This is just an example. I can't know how many times the object will be referenced yet because this code will likely be extended and functionality will be added. Thus, adding more references. I wanted to start well so that later on I don't run into a wall. — Jonny Sooter
– Jonny Sooter, Commented Sep 9, 2013 at 16:10

Daff · Accepted Answer · 2013-09-09 16:00:31Z

1

This looks primarily like a style question. Generally I only define a variable if I need to access that same value more than once. When referencing a function you will also run into scope issues. For example in this case:

var obj = {
    num: 2,
    trigger: function() {
        console.log(this.num);
    }
}

obj.trigger();

It will log 2 to the console because the function is bound to obj as the scope. If you do

var t = obj.trigger;
t();

however, you will get undefined because the default scope for a function is the window object. In ECMAScript 5 you can tell what to bind the function to like this:

var t = obj.trigger.bind(obj);
t();

Which will now log 2.

answered Sep 9, 2013 at 16:00

Daff

44.4k9 gold badges108 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonny Sooter Over a year ago

Good information! I didn't realize this and probably will save my ass later on :)

Collectives™ on Stack Overflow

jQuery options object reference

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related