Question

i am currently learning about javascript namespaces as i build a website and i have the following requirements: i want to make all of my code private so that other public scripts on the page (possibly adverts, i’m not too sure at this stage) cannot override or alter my javascript. the problem i am foreseeing is that the public scripts may use window.onload and i do not want them to override my private version of window.onload. i do still want to let them run window.onload though.

so far i have the following layout:

//public code not written by me - i'm thinking this will be executed first
window.onload = function() {
    document.getElementById('pub').onclick = function() {
        alert('ran a public event');
    };
};

//private code written by me
(function() {
    var public_onload = window.onload; //save the public for later use
    window.onload = function() {
        document.getElementById('priv').onclick = function() {
            a = a + 1
            alert('ran a private event. a is ' + a);
        };
    };
    if(public_onload) public_onload();
    var a = 1;
})();

i have quite a few questions about this…

firstly, is this a good structure for writing my javascript code, or is there a better one? (i’m planning on putting all of my code within the anonymous function). is my private code really private, or is there a way that the public javascript can access it? i’m guessing the answer to this is “yes – using tricky eval techniques. do not embed code you do not trust”, but i’d like to know how this would be done if so.

secondly, when i click on the public link, the event is not fired. why is this?

finally, if i comment out the if(public_onload) public_onload(); line then a is returned correctly when i click the private button. but if i leave this line in then a‘s value is nan. why is this?

Answer 1

You can attach event listeners to avoid their overriding in some way like this:

<ol id="res"></ol>

<script type="text/javascript">
    var res = document.getElementById('res');

    function log(line) {
        var li = document.createElement('li');
        li.innerHTML = line;
        res.appendChild(li);
    }

    // global code:
    window.onload = function() {
        log('inside the global window.onload handler');
    };

    // private code:
    (function(window) {
        function addEvent(el, ev, fn) {
            if (el.addEventListener) {
                el.addEventListener(ev, fn, false);
            } else if (el.attachEvent) {
                el.attachEvent('on' + ev, fn);
            } else {
                el['on' + ev] = fn;
            }
        }
        addEvent(window, 'load', function() {
            log('inside the second window.onload handler in "private section"');
        });
    })(window); 
</script>​

DEMO

The example of code organization you asked about:

HTML:

<ol id="res"></ol>​

JavaScript:

/* app.js */

// in global scope:    
var MyApp = (function(app) {
    var res = document.getElementById('res');

    app.log = function(line) {
        var li = document.createElement('li');
        li.innerHTML = line;
        res.appendChild(li);
    };

    app.doWork = function() {
        app.log('doing a work');
    };

    return app;
})(MyApp || {});

/* my-app-module.js */

// again in global scope: 
var MyApp = (function(app) {

    app.myModule = app.myModule || {};

    app.myModule.doWork = function () {
        app.log('my module is doing a work');
    };

    return app;
})(MyApp || {});

/* somewhere after previous definitions: */

(function() {
    MyApp.doWork();
    MyApp.myModule.doWork();
})();

​DEMO

MyApp is accessible from outside
Nothing is accessible from outside