JSmodule - a javascript object for stacking methods and hooks

The idea behind this project is to create a central starting and reusable point for all my javascript projects. This would allow me to create unlimited methods, plugins and keep all data encapsulated in a single namespace much like a JS framework.

I wanted that by default all methods would be hook-able so when an application based on this project is released other developers could have extensive control over the application without having to alter the original code base.

Below i will go through a simple(not the most useful either) example use of JSmodule, the full code can be seen in this gist https://gist.github.com/2269151.

Here is the starting sample code:

window.view = new JSmodule("V");

view.extend({ 
    viewport: function(){
        var e = window, a = 'inner';

        if ( !( 'innerWidth' in window ) ){
            a = 'client';
            e = document.documentElement || document.body;
        }

        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
    },

    getHeight: function(){
        var h = view("viewport").height;
        return h;
    },

    getWidth: function(){
        var w = view("viewport").width;
        return w;
    }
});

We passed V to the JSmodule constructor to set the object identifier, so when a function like view.debug(“Testing Object…”) is called you will see the following output in your browser’s console [V] >> Testing Object… to help you track down your console log data. An advantage of having a per object debug function is that you could disable it to avoid outputting all this debug data while in production, which is better than tracking down those conole.log() lines and commenting then or deleting then.

Every JSmodule object starts with a single method, the init method. This method will initialize your application when the time is right. Please note you could overwrite any method including init which is not recommended to do since we could just add a hook, but more on that in a minute.

As you could tell we used the extend() function to add methods to our object. By default you could add before hooks on any method but after hooks need to be implemented in a per method basis. Lets add after hook compatibility to the getWidth method:

view.extend("getWidth", function(){
    var w = view("viewport").width;
    //Call after hooks and pass the width in the first argument
    view.afterHook("getWidth",[w]);
    return w;
})

Now let’s create a button that would call the getWidth method when clicked:

<button onClick="view('getWidth')">View my window Width</button>

When this button is clicked nothing will actually happen, but we could change that via hooks. Lets add a before hook to confirm if we want to view the window width:

view.registerHook("before", "getWidth", function(){
    var val = confirm("Are you sure you want to view your window WIDTH?");
    return val;
})

Now when the button is clicked you will get the confirmation message. Note that selecting either Ok or Cancel in the confirmation message will get the same results, nothing will happen. Let’s add an after hook now to the same method:

view.registerHook("after", "getWidth", function(width){
    alert("Your window is "+ width + " pixels wide");
})

If you click the button now you will get the confirmation message and if you select Ok you will get the message showing the actual width of the window. Although this specific example may have no real use or need, I find it simple enough just to explain some of the features of the JSmodule object.

For a better and more useful examples check these files on one of my projects https://github.com/ptejada/iD/tree/master/js where i create a jQuery plugin like jQuery UI using JSmodule.

So, im i doing it right? could this really be useful to others developers?

Thanks in advance