Architecture for creating a JavaScript framework

Question

Around one year ago we started a web system that over the time has grown quite a bit. From the beginning the goal was to build reusable code that would speed up the development of future projects, and it has. With every new project, the reusable code from the previous was taken and build upon it.

At the moment, the server side code is really clean, and there is a clear separation between the "framework" (generic functionality) and the project specific logic.

However, the javascript has grown out of control. For the page specific javascript (button events, ajax calls, etc.) we've been using closures and the module pattern. But the javascript common files (the ones we import in every page), are full of functions with no association between them beyond some similarities on the names.

Because of this I'm now trying to build a sort of framework (easily reusable and maintainable code) encapsulating the logic and functions we already have. It should be one "core" object and several optional "extensions". They would be in separate files to improve the order of the code. Specifically, I'm trying to achieve the following:

• Encapsulation of the code to prevent name collisions. We are very comfortable with the private/public separation of the closures.
• Extendable functionality, something like the open/close principle. The tricky part here is that an extension might want to access a private method of the core.

I've been reading a lot on OO in javascript, and I've even tried to understand how jQuery does it, but I'm still unable to get my head around it. For the architectural side, it seems that I should be building a module or service framework, but the ones I've found are much more complex than what I want to achieve.

If it weren't for the tricky part mentioned earlier, a simple $.extension() would do, but I'm stuck in the how to access a core private method from an extension part. In short, my question would be: Is there a recommended architecture in javascript to build something like the following example?

var framework = function () {
    //Private variable
    var internalState = 1;

    //Private method
    var validState = function () { ... }

    //Public methods
    return {
        commonTask1: function () { ... },
        commonTask2: function () { ... }
    }
}();

framework.addMoreFunctionality(function () {
    var specificData = '';

    return {
        extensionMethod: function () {
            //TRICKY PART HERE
            if (core.validState()) { ... }
        }
    }
}());

Answer 1

Just return a function from the framework module.

return {
    isValidState: function() { ... }
    commonTask1: function () { ... },
    commonTask2: function () { ... }
}

The isValidState function could then check the internal state.

// isValidState
function() {
    if (validState()) {
        return true;
    }

    return false;
}

Check if the state is valid then by calling core.isValidState(); Like this you will not get any reference to any "private" variable inside the framework core because the functions returns a bool and not a direct reference to any objects.

Answer 2

Have you explored DOJO ? It has module system, a build system and very elaborate OO framework implemented. You can have your own modules / "base Dijits" that will help you implement "generic modules/widgets" and then extend them per-project, by writing / adding specific capabilities the way you have described.

DOJO is not exactly in Vogue, but if your application deals with forms like interface, then it's definitely a candidate.