OOP Dependency Inversion Principle

Question

I made an example for learning Dependency inversion principle in JavaScript OOP programming .

String.prototype.ucfirst = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

function textHandler(){

    this.printRedbox = function( ){
        return ' Red Box text ';
    }

    this.printBluebox = function( ){
        return ' Blue Box text ';
    }
};


function htmlHandler( handler ){

    var block = [],
        box  = document.getElementById('container');

    this.boxContentHandler =  handler ;

    this.setType = function( handler ){
        this.boxContentHandler = handler
    };

    this.appendBlock = function( html ){

        block.push( html );
        box.innerHTML = block.join('');
    };

    this.printBox = function ( action ){

        var title = this.printTitle() ,
            text  = this.boxContentHandler[ 'print'+ action.ucfirst() ](),
            html  = '<div class="box '+ action.replace('box','') +'">'
                        +   title + text
                    +'</div>' ;

        this.appendBlock( html );
    };

    this.printTitle = function( ) {
            return 'Title ' + block.length + ' <br />';
    };
};

Here I am doing the action handling part

var htmlHandle = new htmlHandler(  new textHandler()  );

document.getElementById('bluebox').addEventListener( 'click', function(){
    htmlHandle.printBox(  this.id );
},false );            

document.getElementById('redbox').addEventListener( 'click', function(){
    htmlHandle.printBox(  this.id );
},false );  

I would like to know, is there a way to make it better. Did I miss anything here ?

Answer 1

This is a decent way to implement Dependency Inversion, from the standpoint of your implementing classes. The only improvements I would recommend is to find a good class library that does the lookup of dependencies for you.

Really Inversion of Control/Dependency Inversion involves several parts:

1. Writing your classes so that they receive their dependencies via one of three methods:
   1. Constructor injection (like you have) new Foo(x)
   2. Property injection a.foo = b
   3. Setter injection a.setFoo(b)
2. An object factory that can turn a class name in the form of a String into a new object
3. An dependency resolver that does the lookup of dependencies and injects them into a new object
4. A "container" object allowing you to configure your dependencies and wire your classes together

I've created Hypodermic for this purpose, though I think it should be refactored to separate the "container" from the "dependency resolver" functionality. I would be interested in finding out if there are other Dependency Injection libraries out there for JavaScript.

Answer 2

From a once over;

• ucfirst <- not a great name
• Single comma separated var statements <- nice
• Consider using use strict
• You need more comments explaining how you made DIP work, honestly I am not convinced that this is a good example of DIP ( I could be wrong )
• The link between the id and the function name makes for brittle code <- Apparently that's the point ;)
• You are not using setType anywhere in your example
• htmlHandler <- probably should have been boxHandler given how everything inside references box and block