local and global variables in JS

Question

I've the following javascript code

 var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

I want to use IIFE to encolose all my functions in a closure to avoid cluttering the global name space,so I wrote :

 (function(window){
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }
    });

However, I do not understand this notion very well, now in my HTML page how would I call my function onLoadPage ?

Answer 1

Now that you have enclosed the module, you need to decide what you want to expose to the outside world. Anything you want to expose, you can export . Also, you need to decide what context (in this case, window ) that you want to attach to. Then pass the context in right away (thus completing the IIFE).

For example:

(function(window){
    var exports = {};
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

    exports.getConfiguration = getConfiguration;
    window.myModule = exports;
})(window);

Attaching to the passed in window object is one way to export things out in a controlled fashion. So, you do need to pass the context (in this case window) to the IIFE. Perhaps, window will not always be the context for the call.

After running this code, myModule will be available on the global scope.

Answer 2

You can't without putting it in the global namespace somehow.

My recommendation to structure code like this:

function ExampleHelper() {
    (function(scope) {

        scope.globalConfiguration = null;

        scope.loadFile = function(filePath) {

        };

        scope.onLoadPage = function() {

        };

        scope.getConfiguration = function() {

        };

        scope.process = function() {

        };

    })(this);
}

var foo = new ExampleHelper(); // "foo" now contains all of your functions
foo.onLoadPage();

Answer 3

You can set your function to window.onload callback.

 (function(window) { var globalConfiguration = null; window.onload = onLoadPage; function loadFile(filePath) {} function onLoadPage() { alert('hello world'); } function getConfiguration() {} function process() {} }(window)); 

Answer 4

This is called chaining of functions/methods and is usually done for better readability of the code and to avoid the usage of temporary variables to hold the return value of each function.

Check this post on chaining methods which helped me to understand the chaining better.

I see you wanted to use closures to avoid cluttering the global object. However, do note that we write functions for reusability. Though you create a closure, ensure that your methods inside the outer function are abstracted such that they can be used by other parts of the code. For ex: from your code, you have a loadFile method which could be reused.

Now to see how you can use the methods you described in a chain.

Assumptions: (since i don't know why you wrote those methods, i am making some assumptions).

1. loadFile(filepath) - returns a file object
2. onPageLoad() - once the page is loaded, it returns the object or id of the input file
3. getConfiguration() - gets the file path
4. process() - process the file

onPageLoad().loadFile(getConfiguration()).process();

The important part is that the scope of the object is set correctly in the chaining. In order to do this, each method must return the reference to appropriate object.

Hope this helps.