Question

I am trying to create Classes for Countries, Regions, Cities to display Polygons on Google Map.

All the 3 Class will have almost the same methods. This means i have to copy all methods 3 times which is again the DRY principle.

How may I extract a parent class from these child classes? A sample Country class looks like

/*
 *
 *
 *
 */
 function CountryPoly 
 {
   /*
    * Regular Expression Pattern to validate color values.
    */    
   this.colorPattern    = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;

   /*
    * Regular Expression Pattern to validate opacity values.
    */    
   this.opacityPattern  = /^0\.[0-9]{1,2}$/;

   /*
    * Array containing the Child objects
    */
    this.children       = [];

   /*
    *  default Polygon options.
    */    
   this.polyOptions = {
    paths:          [],
    strokeColor:    #FF0000,
    strokeOpacity:  0.8,
    strockWeight:   3,
    fillColor:      #FF0000,
    fillOpacity:    0.35
   }
 }

 CountryPoly.prototype = {
  toString: function() 
  {
    return "[object CountryPoly]";
  },

  setStrocColor: function(color)
  {
    if(color && this.colorPattern.test(color)) 
    {
      this.polyOptions.strokeColor = color;
    }  
  },

  setStrokeOpacity: function(opacity)
  {
    if(opacity && this.opacityPattern.test(opacity)) 
    {
      this.polyOptions.strokeOpacity = opacity;
    }  
  },

  setFillColor: function(color) 
  {
    if(color && this.colorPattern.test(color)) 
    {
      this.polyOptions.fillColor = color;
    }  
  },

  setFillOpacity: function(opacity)
  {
    if(opacity && this.opacityPattern.test(opacity)) 
    {
      this.polyOptions.fillOpacity = opacity;
    }  
  },

  setStrockWeight: function(strockWeight) 
  {
    if(strockWeight && !isNaN(parseInt(strockWeight)) && strockWeight < 5)
    {
      this.polyOptions.strockWeight = strockWeight;
    }  
  },

  setCoordinates: function(paths) {
    // check if passed argument is Array.
    if(paths.length) {
      this.polyOptions.paths = paths;
    }
  }

  getChildren: function() {
     // Ajax Request to access child objects.
     // this.children = Ajax Response 
  },

  draw: function() {
    //Draws the Polygon
  }  

 }

Answer 1

You can use javascript’s prototype system which although isn’t not classical OO via “Classes”, it allows a similar behavior and is much more flexible.

var PolygonBase = function () {};

PolygonBase.prototype.colorPattern = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
PolygonBase.prototype..opacityPattern  = /^0\.[0-9]{1,2}$/;
// ... etc ...

var Country = function () {};
Country.prototype = new PolygonBase();
Country.prototype.constructor = Country;