JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

MIXINS patterns,

inheriting properties....
<div></div>

JavaScript

var myMixins = {

  moveUp: function(){
    $("div").append("1. moved left")
  },

  moveDown: function(){
    $("div").append("2. moved donw")
  },

  stop: function(){
    $("div").append("3. stopped ")
  }

};

function carAnimator(){
  this.moveLeft = function(){
    $("div").append("1. moved left")
  };
}

function personAnimator(){
  this.moveRandomly = function(){ /*..*/ };
}

// Extend both constructors with our Mixin
$.extend( carAnimator.prototype,true, myMixins );
$.extend( personAnimator.prototype,true, myMixins );

// Create a new instance of carAnimator
var myAnimator = new carAnimator();
myAnimator.moveLeft();
myAnimator.moveDown();
myAnimator.stop();

// Outputs:
// move left
// move down
// stop! in the name of love!