implementation of functions within the js module pattern

Question

I have a bunch of js code that I'm trying to wrap using the module pattern:

(function(){

function closeClicked(closeButton)
{
//do some stuff
}
//some more js code

}());

The html caller is defined like this:

<button type="button" onclick="closeClicked(this)">
<span aria-hidden="true">×</span></button>

The code injects some html into an element on the page and the button within the html calls the js function. This works as expected but the function is not found when all of the code is wrapped as a module. Do I need to define or call the function differently when this code is wrapped as a module?

You don't have access to closeClicked outside the anonymous function. There are two options: either add an event listener in JavaScript, not in HTML or expose closeClicked in global scope (I do not advice doing that). — freakish
– freakish, Commented Jul 26, 2016 at 21:27

Daniel Weiner · Accepted Answer · 2016-07-26 21:29:06Z

0

This is by design. Variables in a closure are not accessible outside the closure.

In the module pattern you expose a module which contains your functionality. In this case, it would look something like this:

var myModule = (function(){

    function closeClicked(closeButton)
    {
    //do some stuff
    }

    //some more js code

    return {
        closeClicked: closeClicked
    }
}());

myModule would be the object that's being returned from the outer function. And then you would reference myModule.closeClicked.

answered Jul 26, 2016 at 21:29

Daniel Weiner

1,9041 gold badge12 silver badges19 bronze badges

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

2 Comments

user6604655 Over a year ago

Thanks Daniel. How would I expose multiple functions on a module. Something like this although this actual code doesn't work: var TestModule = (function(){ function CloseClicked(closeButton) { alert('close clicked'); } function AnotherFunction(); { alert('another function called'); } return { CloseClicked: CloseClicked, AnotherFunction: AnotherFunction } }());

Daniel Weiner Over a year ago

that semicolon at function AnotherFunction(); {...} should not be there. It should be function AnotherFunction() {...}

Collectives™ on Stack Overflow

implementation of functions within the js module pattern

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related