CODEWITHSUNDEEP
javascript
user1637281
user1637281

Reputation:

Where is the best place for event callbacks? ( anonymous or named )

This is a bit of an obsessive question. But I'm trying to make my code base more consistent. In some places I make callbacks there own function and in others I write them inline anonymously in the event listener.

I want a consistent way to to do this.

Is this just a random design choice ( flip a coin and pick one) or is there a best practice way to do this.

Here is the shortest example I could find.

NS.parsel({
    Name: 'MSimOut',
    S: {
        Page:             SPage,
        Storage:          SStorage,
        AniFlipMediaPane: MSimMediaPane
    },
    E: {
        signout_button: '#signout_button'
    },
    init: function () {
        var self = this;

         // anonymous inline function, should I move out as a named function and call using bind?

        self.E.signout_button.addEventListener("click", function () {
            self.S.AniFlipMediaPane.run('mi_about');
            self.S.Page.flip('sp');
            self.S.Storage.clear();
        }, false);
    },

    // or give a name like this?

    clicked: function () {
        self.S.AniFlipMediaPane.run('mi_about');
        self.S.Page.flip('sp');
        self.S.Storage.clear();
    }
});

Upvotes: 4

Views: 70

Answers (1)

Justin Ethier
Justin Ethier

Reputation: 134227

It depends on the context. For event handlers I am inclined to leave it as an anonymous function, especially if the function is small and there is an easy way to call the handler (EG: .click() in jQuery). This is a simpler, more straightforward way to write the code.

On the other hand, if you have a function that is very large or that will be called explicitly from places other than an event handler, it may be cleaner to leave it as a named function.

Upvotes: 2

Related Questions