Set multiple options javascript (MooTools) object at once

Question

I've got something like this

var obj = new someClass(el, {
    onOne: function () {
        doThis();
    },
    onTwo: function () {
        doThis();
    },
    onThree: function () {
        doThis();
    },
    onFour: function () {
        doThat();
    }
});

So, the first three events will have the same result, only the fourth is different. Like this, it seems kind of repetitive, so I was hoping that I could do something like this

var obj = new someClass(el, {
    onOne: 
    onTwo: 
    onThree: function () {
        doThis();
    },
    onFour: function () {
        doThat();
    }
});

But I can't.
I wonder, if there's some way I can do something similar (without changing the class itself). In think it would make the code clearer and better maintainable.

freakish · Accepted Answer · 2012-05-21 10:14:38Z

3

How about predefining the function?

var myHandler = function() {
    doThis();
};

var obj = new Class(el, {
    onOne: myHandler,
    onTwo: myHandler,
    onThree: myHandler,
    onFour: function () {
        doThat();
    }
});

If you know keys of the object you may additionally try working with for loop, for example

var passIt = { 
    onFour: function() { 
        doThat(); 
    } 
};

var keys = ['onOne', 'onTwo', 'onThree'];
var l = keys.length;
for (var i = 0; i < l; i++) {
    passIt[keys[i]] = myHandler;
}

var obj = new Class(el, passIt);

answered May 21, 2012 at 10:14

freakish

57k12 gold badges141 silver badges181 bronze badges

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

1 Comment

kasimir Over a year ago

Although not what I was hoping for, this is the best answer to my question. Also an upvote for the clever second solution, from which my (current) implementation would not really benefit, but I certainly can see some neat stuff being done with it.

Matt McMahon · Accepted Answer · 2012-05-21 13:19:12Z

0

Functions are first-class citizens in the JavaScript world. Unless you've omitted extra processing in your anonymous functions, the following should work:

var obj = new Class(el, { 
    onOne   : doThis
  , onTwo   : doThis
  , onThree : doThis
  , onFour  : doThat
})

Which creates three method aliases for doThis on obj, named onOne, onTwo, and onThree, and a method alias for doThat on obj named onFour.

When you invoke obj.onOne(...), it's equivalent to doThis.call(obj, ...).

Note: I'm not sure you're using MooTool's Class() constructor properly in your example. Reading the docs, it looks like Class excepts only one argument, a properties object (or function) that the newly created object will inherit from. If the code doesn't work, try removing el and adding an 'Extends' : el property to the object literal. I've never used MooTools personally, though, so I'm not sure what to expect.

edited May 21, 2012 at 13:19

answered May 21, 2012 at 12:57

Matt McMahon

6555 silver badges5 bronze badges

2 Comments

Dimitar Christoff Over a year ago

where he says new Class, he means new ClassInstance and Class references somethign that constructor object has defined previously. in his definition, his constructor function is set to take 2 arguments - an element and an options object, which is where the event handlers are coming from. I have edited the original question to reflect this. p.s. go away with this @fat syntax, its fugly. :)

Matt McMahon Over a year ago

I was wondering, because he has mootools tagged, and it appears to have a global Class() convenience function, but the signature in the docs doesn't match his. (And I'd argue that beautiful syntax is syntax that helps you spot errors in your code, but let's leave the religious wars to others. ;))

Collectives™ on Stack Overflow

Set multiple options javascript (MooTools) object at once

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related