The Problem

I have a pre-made js file (which I don't pletely understand) that is being imported to my html page. This js file defines a function that I would like to be able to call through script blocks in the html page itself.

The function I would like to call is app.openNav. I have tried using a variety of different methods to call this function (window.App.app.openNav, App.app.openNav, App.openNav, app.openNav, even window.openNav) to no avail.

My failure to call the function through these methods made me think that perhaps I needed to define it outside of the top function (make it global?). I tried doing that by saying app.openNav = {}; but that did not work either.

This is in nav.js:

(function(window, document, undefined)
{
    window.App = (function()
    {    
        var app = { };

        app.init = function()
        {
            app.openNav = function()
            {
                //open navigation
            };

            // open nav with button
            document.getElementById('foo').addEventListener('click',app.openNav,false);
        };
        return app;
    })();
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', window.App.init, false);
    }
})(window, window.document);

As you can see, I currently have a method of calling app.openNav from inside nav.js by using addEventListener on an html object. However, I am using an external library (hammer.js) to interpret events which I want to use to open the navigation.

Questions

Is it possible to call the app.openNav function from outside nav.js?
If so, how would I go about doing that?

The Problem

I have a pre-made js file (which I don't pletely understand) that is being imported to my html page. This js file defines a function that I would like to be able to call through script blocks in the html page itself.

The function I would like to call is app.openNav. I have tried using a variety of different methods to call this function (window.App.app.openNav, App.app.openNav, App.openNav, app.openNav, even window.openNav) to no avail.

My failure to call the function through these methods made me think that perhaps I needed to define it outside of the top function (make it global?). I tried doing that by saying app.openNav = {}; but that did not work either.

This is in nav.js:

(function(window, document, undefined)
{
    window.App = (function()
    {    
        var app = { };

        app.init = function()
        {
            app.openNav = function()
            {
                //open navigation
            };

            // open nav with button
            document.getElementById('foo').addEventListener('click',app.openNav,false);
        };
        return app;
    })();
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', window.App.init, false);
    }
})(window, window.document);

As you can see, I currently have a method of calling app.openNav from inside nav.js by using addEventListener on an html object. However, I am using an external library (hammer.js) to interpret events which I want to use to open the navigation.

Questions

Is it possible to call the app.openNav function from outside nav.js?
If so, how would I go about doing that?

• javascript
• html

• 1 app is effectively private to App - any invocation of methods on the object assigned to App need to be done through App - it should be noted that you've hard-coded an id of 'foo' in your example, so make sure that you actually have an element that will be selected when you're adding the event listener inside your init - run your code in the console and call App.init() to see what it will do – kinakuta Commented Sep 14, 2013 at 0:18
• @kinakuta app === App. They're the same object. – Šime Vidas Commented Sep 14, 2013 at 1:00
• @kinakuta app is returned from its function which is immediately invoked and which return value is assigned to window.App. Therefore, window.App refers to the app object. See my demo. – Šime Vidas Commented Sep 14, 2013 at 14:20
• @kinakuta OP wants to know how to access the app.openNav function from a different script. Since, app is assigned to App, that function can be accessed via App.openNav. This answers OP's question. You didn't mention this solution in your initial ment, so I assumed you didn't understand this. – Šime Vidas Commented Sep 14, 2013 at 19:38
• @kinakuta You fail to see that app is exactly the same as App. They're one and the same object. The local app name is just used out of convenience while constructing the object. (jQuery is doing the same thing it it's code, btw). Therefore, app being "not in scope" is irrelevant here (and misleading, IMO). The was this pattern is supposed to be used is, methods are defined on app and then invoked on App. – Šime Vidas Commented Sep 14, 2013 at 20:08

1 Answer 1

According to your code, it is accessible as App.openNav.

Live demo: http://jsfiddle/simevidas/6N3dZ/ (Wait 2 seconds for the alert to show up.)