Javascript self contained sandbox events and client side stack

Question

I'm in the process of moving a JSF heavy web application to a REST and mainly JS module application .

I've watched "scalable javascript application architecture" by Nicholas Zakas on YUI theater (excellent video) and I implemented much of the talk with good success, but I have some questions:

1. I found the lecture a little confusing in regards to the relationship between modules and sandboxes, on one hand, to my understanding, modules should not be affected by something happening outside of their sandbox and this is why they publish events via the sandbox (and not via the core, since the core is for hiding the base library) but each module in the application gets a new sandbox? Shouldn't the sandbox limit events to the modules using it or should events be published cross page? e.g. : if I have two editable tables but I want to contain each one in a different sandbox and its events affect only the modules inside that sandbox, something like message box per table which is a different module/widget, how can I do that with sandbox per module, of course I can prefix the events with the moduleid but that creates coupling that I want to avoid ... and I don't want to package modules together as one module per combination as I already have 6-7 modules.

2. While I can hide the base library for small things like id selector etc.. I would still like to use the base library for module dependencies and resource loading and use something like YUI loader or dojo.require so in fact I'm hiding the base library but the modules themselves are defined and loaded by the base library ... seems a little strange to me.

3. libraries don't return simple js objects but usually wrap them e.g. : You can do something like $$('.classname').each(.. which cleans the code a lot, it makes no sense to wrap the base and then in the module create a dependency for the base library by executing .each but not using those features makes a lot of code written which can be left out ... and implementing that functionality is very bug prone.

4. Does anyone have any experience with building a front side stack of this order? How easy is it to change a base library and/or have modules from different libraries, using yui datatable but doing form validation with dojo ... ?

5. Somewhat of a combination of 2+4 if you choose to do something like I said and load dojo form validation widgets for inputs via YUI loader would that mean dojocore is a module and the form module is dependent on it?

Answer 1

We use this pattern heavily in our applications. Check out the book JavaScript Patterns by Stoyan Stefanov for a detailed look in how to implement the Sandbox pattern. Basically it looks something like this:

(function (global) {
    var Sandbox = function fn (modules, callback) {
        var installedModules = Sandbox.modules,
            i = 0,
            len = modules.length;

        if (!(this instanceof fn)) {
            return new fn(modules, callback);
        }

        // modules is an array in this instance:
        for (; i < len; i++) {
            installedModules[modules[i]](this);
        }

        callback(this);
    };

    Sandbox.modules = {};
    global.Sandbox = Sandbox;

})(this);

// Example module:
// You extend the current sandbox instance with new functions
Sandbox.modules.ajax = function(sandbox) {
    sandbox.ajax = $.ajax;

    sandbox.json = $.getJSON;
};

// Example of running your code in the sandbox on some page:
Sandbox(['ajax'], function(sandbox) {

    sandbox.ajax({
        type: 'post',
        url: '/Sample/Url',
        success: function(response) {
            // success code here. remember this ajax maps back to $.ajax
        }
    });

});