Object Oriented Javascript or Jquery code implementation

Question

How to implement this following scenario using Javascript or Jquery ??

create factory to create different types of animals e.g. snake, lion, tiger, fish, bird, etc. each of them derives from class animal animals base class has some properties each derived class has a special method unique to the specific animal e.g. fish.swim(), bird.fly(), snake.crawl(), lion.run(), etc.

the ui shows a drop down on the left that has 3 values (land, water and air) on choosing the value, right side should show appropriate animals (e.g. water => fish, air => bird, land => snake, lion)

I can understand that I can use Prototype or Observer pattern here but I am stuck with the proper implementation . But still confused about the proper approach and even if I get into something , coding wise I am stuck .

I would recommend you to start reading this awesome book https://addyosmani.com/resources/essentialjsdesignpatterns/book — Ionut, May 29 '17 at 14:46
Use a factory function that keeps your dropdown up to date... — Jonas Wilms, May 29 '17 at 14:49
@JaredFarrish Depends on what you do. If it is a small website jQuery will do just fine. — Michelangelo, May 29 '17 at 16:03
@Michelangelo - Reread the second half of the sentence I wrote on that. `:)` — Jared Farrish, May 29 '17 at 16:32
@ashes321 - I wouldn't get too worked up about a downvote (it wasn't me); you can always delete the question and re-ask it with more clarification. My advice, "get into something", then ask that question. In other words, naive implementations with problems make for better questions that "I dunno, show me how" (respectfully), which can attract downvotes. — Jared Farrish, May 29 '17 at 16:39
@ashes321 Get your hands dirty, that is the only way to learn and maybe learn to code first if you are stuck coding wise? — Michelangelo, May 29 '17 at 16:47
@ashes321 - My original comment was made on the wrong question (I had another tab open to SO). `:o` If it sounded completely out of left field, that's cuz it was. `:)` — Jared Farrish, May 29 '17 at 16:56

synthet1c · Accepted Answer · 2017-06-01T04:14:40.893

Here is a basic class structure for this. Please read through the comments for an explanation. As others have said, reading addy ossmani's book would be a great source to help you understand OOP more thoroughly.

// Base class
function Vehicle(type, wheeltype, noun, medium) {
  this.type = type
  this.wheeltype = wheeltype
  this.noun = noun
  this.medium = medium
}
Vehicle.prototype = {
  // doing is declared on Vehicle as it's common to all child classes which all
  // delegate to the same function
  doing: function() {
    return `I love ${this.noun} my ${this.color} ${this.type} on the ${this.medium}`
  }
}

function Car(model, color) {
  // run the constructor function passing in the current
  // objects context
  Vehicle.call(this, 'car', 4, 'driving', 'street')
  // set properties on the Car
  this.model = model
  this.color = color
}
// This extends the Vehicle class
Car.prototype = new Vehicle
// this method is unique to Car
Car.prototype.drive = function() {
  return `cruisin' down the ${this.medium} in my ${this.model}`
}

// you could use the class syntax
class Ship extends Vehicle {
  constructor(model, color) {
    // super calls the constructor with the context already set
    super('boat', 0, 'sailing', 'ocean')
    this.model = model
    this.color = color
  }
  // unique method for a Ship
  sail() {
    return `I'm on a ${this.type} mother f**ker`
  }
}

class JetSki extends Vehicle {
  constructor(model, color) {
    super('jetski', 0, 'riding', 'ocean')
    this.model = model
    this.color = color
  }
  ride() {
    return `I'm on a ${this.type} mother f**ker`
  }
}

// create objects from your constructors
var car = new Car('sixfaw', 'green')
var ship = new Ship('Riviera', '24 carot gold')
var jetski = new JetSki('Seadoo', 'green')

console.log('car.doing() ->', car.doing())
console.log('car.drive() ->', car.drive())
console.log('ship.doing()->', ship.doing())
console.log('ship.sail() ->', ship.sail())

var vehicles = [car, ship, jetski]

function filterByMedium(medium, vehicles) {
  return vehicles.filter(function(vehicle) {
    return vehicle.medium === medium
  })
}

console.log(
  filterByMedium('ocean', vehicles)
)

Since all the objects have the same api you can use duck punching to check for the commonality between the objects. Yes put them in an array and filter the result as required `[car, boat].filter(x => x.medium == 'street')` — synthet1c, Jun 01 '17 at 01:40

Object Oriented Javascript or Jquery code implementation

1 Answers1