0

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 .

10
  • Please provide your attempt Commented May 29, 2017 at 14:43
  • 2
    I would recommend you to start reading this awesome book addyosmani.com/resources/essentialjsdesignpatterns/book Commented May 29, 2017 at 14:46
  • Use a factory function that keeps your dropdown up to date... Commented May 29, 2017 at 14:49
  • 1
    Please narrow your question down, this is too broad Commented May 29, 2017 at 14:50
  • 1
    @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. Commented May 29, 2017 at 16:39

1 Answer 1

1

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)
)

Sign up to request clarification or add additional context in comments.

1 Comment

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')

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.