CODEWITHSUNDEEP
javascriptoop
Patrick Pease
Patrick Pease

Reputation: 179

JS OOP and Forced Overriding

I'm building an object which will have a "buildVisuals()" method. Depending on the context, "buildVisuals()" could create a google maps marker, or fill out an html template, or any of a number things that future me might decide to make it do. But, if visualization is available in any context, I want it to execute on creation.

thing = function(){
   var x, y, z;
   this.buildVisuals();
}

...

new thing();

Currently, I'm considering leaving this method empty and forcing the contexts that utilize it to over-ride the method so that only the contexts that require maps, or whatever, can have the functionality they need, and for those context don't require immediate visualization they can leave it blank.

Problem: I don't know what this pattern is called, I don't know if it's more trouble than it's worth.

Upvotes: 0

Views: 64

Answers (2)

GameAlchemist
GameAlchemist

Reputation: 19294

Two ideas comes to mind when reading your question :
You can either consider the buildVisuals method as an abstract / virtual / mustInherit method. 

// Abstract Base class
function Handler() {
   this.visuals = this.buildVisuals();
}

Handler.prototype = {
  doAThing : function() {
  },
  buildVisuals : function () {
     throw('Error : buildVisuals was not overloaded');
  }
};

// Real class inheriting from the base class
function HTMLHandler() {
    Handler.call(this);
}

HTMLHandler.prototype = Object.create(Handler.prototype);

// overloading (defining) buildVisual
HTMLHandler.prototype.buildVisuals = function() {
   // Real code here
};

// now you create with : 
var myHandler = new HTMLHandler();

// notice that the following line would throw :
// var myThrowingHandler = new Handler();

But i'd prefer the injection pattern, and i'd even prefer it by injecting a class that handles the visual.

//  --------------
function Handler( visualHandlingClass ) {

  this.visualHandler = new visualHandlingClass( /* maybe some params here */ );

}

Handler.prototype = {   ...  } ;    

//  --------------

function HTMLVisualHandler () {
    // class constructor here...
}

HTMLVisualHandler.prototype = {   ...   } ;

//  ---------------
var HandlerUsingHtml = new Handler ( HTMLVisualHandler ) ;

Now if you want to choose with a string for some reason, you might want either to use the factory pattern to get your instance, but a simple helper function is good enough : 

function provideHandler( outputKindString ) {
     if (outputKindString == 'html') {
        return new Handler ( HTMLVisualHandler ) ;
     } 
     if (  ....  )
 }

var myHandler = provideHandler( 'html' );

Upvotes: 2

Vidul
Vidul

Reputation: 10556

As @Barmar noted, it looks like the Factory design pattern. From the online book:

When To Use The Factory Pattern

  • When we're working with many small objects or components that share the same properties.
  • When we need to easily generate different instances of objects depending on the environment we are in.

Upvotes: 0

Related Questions