How to make a wrapper function in javascript?

Question

I have a lot of click handler like below:

$(document).on('click','.xxxBtn', function(e){
    ....
})

I want to action a cookies saving in some of them.
I can write like below:

function defaultHandler (e, callback) {
    callback(e);
    doSomeJobs();
}

$(document).on('click','.xxxBtn', defaultHandler(e,function(e){
    `diferent code in each Btn`
    ....
})

But I think it would be nice to use a handle like(just look more nice and clear) :

$(document).on('click','.xxxBtn', defaultHandler(e){
    `diferent code in each Btn`
    ....
})

Is it possible to achieve this?

update
em, maybe my example is a little ambiguous.
I mean that if I can make a defaultHandler as what the function statement do in javascript? Just function(e){...} to defaultHandler(e){...}

How would defaultHandler know what function to call if you don't tell it? — T.J. Crowder
– T.J. Crowder, Commented Apr 22, 2014 at 7:37

Tim · Accepted Answer · 2014-04-22 08:42:02Z

2

Short answser:
No, there is no way to tell it defaultHandler(e){...}

Longer answer:

It is possible to achieve something very similar to it. What you need are higher order functions, which are functions that return functions. Yes, such a thing is possible in JS, and even necessary to write clean, concise code.

First, let's start with a simple example. You want to have exactly the same handler shared for everything

var logArgs = function (e) {
    console.log(arguments);
}

$(document).on('click', '.btn', logArgs);

You can use that function as often as you want as an event handler. It'll always work. But let's assume you need some more specific logic. Maybe you'd like to identify the output by always prepending a certain string.

var namedLogger = function (name) {
    return function (e) {
        console.log(name, arguments);
    }
};

$(document).on('click', '.btn', namedLogger('firstButton'));
$(document).on('click', '.btn2', namedLogger('secondButton'));

As you can see, we call the function namedLogger with a name, which it remembers. Then it returns a new function, which is then used as the event handler. When invoked later, your logger callback will have access to the name through the closure scope and log it before the arguments.

You can go crazy with that kind of pattern, and it is actually encouraged. It's the best way to write reusable event handler code in JS.

To make this more relevant for your use case:

var cookieSetter = function (eventHandler) {
    var setCookie = function (key, value) {
        document.cookie = key + '=' + value + ';';
    };

    return function (e) {
        setCookie('whatever', e.something);
        eventHandler(e);
    };
};

$(document).on('click', '.btn', cookieSetter(function (e) {
    console.log('Event triggered', e);
});

edited Apr 22, 2014 at 8:42

answered Apr 22, 2014 at 7:41

Tim

2,46019 silver badges20 bronze badges

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

5 Comments

Mithril Over a year ago

em, maybe my example is a little ambiguous. <br> I mean that if I can make a defaultHandler as what the function statement do in javascript? Just function(e){...} to defaultHandler(e){...}

Tim Over a year ago

That doesn't make a lot of sense. Are you sure the example I just added isn't relevant to your problem? It's basically a default handler that always sets a cookie and then executes the handler passed to it.

Mithril Over a year ago

The example you just added is a decorator.It's not so much different to write like defaultHandler(e,function(e){...} in my example.I really think it would be more cozy to write code like defaultHandler(e){...}, and that is what I am asking.

Tim Over a year ago

defaultHandler(e, function (e) {...}) doesn't make a lot of sense, since when you call it there is no e yet. But to answer your question, no, there is no way to tell it defaultHandler(e){...}. All you can do is using decorators/wrappers for the event handler.

Mithril Over a year ago

Yeah, defaultHandler(e, function (e) {...}) is not make sense, you are right.I just mean that, you know :).Please update you answer, I would choose you.

NilsH · Accepted Answer · 2014-04-22 07:41:18Z

1

I'm not 100% sure I understand your issue, but maybe you're looking for something like this:

function defaultHandler(callback) {
    return function(e) {
        callback(e);
        doSomeJobs();
    }
}

Then use it like

$(document).on('click', '.xxxBtn', defaultHandler(function(e) {});

answered Apr 22, 2014 at 7:41

NilsH

13.9k4 gold badges43 silver badges59 bronze badges

Comments

vp_arth · Accepted Answer · 2014-04-22 08:02:40Z

0

defaultHandle(e){...} is incorrect syntax, you can't.

Use something like followed:

function getHandler(flag, next) {
 if (flag) 'store cookies';
 return next;
}

$(document).on('click','.xxxBtn', getHandler(true, function(e){

}));

edited Apr 22, 2014 at 8:02

answered Apr 22, 2014 at 7:39

vp_arth

15k4 gold badges43 silver badges72 bronze badges

5 Comments

Bhojendra Rauniyar Over a year ago

@MrCode ofcourse! it should be called when clicked.

Bhojendra Rauniyar Over a year ago

nope! you were right previously... as you have parameter(e)

vp_arth Over a year ago

@C-link, I add explanation, why I wasn't right previously

Mithril Over a year ago

every Btn click event function is different, I just want write that more beautiful.

Bhojendra Rauniyar Over a year ago

you changed to function with return but just customHandler without (e) parameter how would work??

Collectives™ on Stack Overflow

How to make a wrapper function in javascript?

3 Answers 3

5 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related