CODEWITHSUNDEEP
javascriptgoogle-mapsjavascript-objects
user991047
user991047

Reputation: 315

How to create common parent class in Javascript

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
  }  

 }

Upvotes: 0

Views: 247

Answers (2)

T. Stone
T. Stone

Reputation: 19495

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;

Upvotes: 1

Jakub Konecki
Jakub Konecki

Reputation: 46008

Take a look here:

http://ejohn.org/blog/simple-javascript-inheritance/

Example:

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});
var Ninja = Person.extend({
  init: function(){
    this._super( false );
  },
  dance: function(){
    // Call the inherited version of dance()
    return this._super();
  },
  swingSword: function(){
    return true;
  }
});

var p = new Person(true);
p.dance(); // => true

var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true

// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

Upvotes: 0

Related Questions