Create mixins which work with instanceof
(friendly for unit tests). Internally
references are handled by a WeakSet
instances so there's no need to manually
keep records of which objects have been mixed onto and risk memory leaks.
With npm
:
npm install --save mixomatic
With yarn
:
yarn add mixomatic
Or alternatively, in a browser or deno you can use it directly in a page via unpkg as a module (not recommended for production use):
import mixomatic from 'https://unpkg.com/mixomatic';
Make a new mixin which appends propertyDescriptors
to an object.
import mixomatic from 'mixomatic';
const myMixin = mixomatic(propertyDescriptors);
Mix onto an object.
const obj = {};
myMixin(obj);
Check if an object has been modified by a given mixin:
obj instanceof myMixin; // true
Also works with classes!
class MyClass {}
myMixin(MyClass.prototype);
const obj = new MyClass();
obj instanceof MyClass; // true
obj instanceof myMixin; // true
And inheritance!
class MyChildClass extends MyClass {}
const obj = new MyChildClass();
obj instanceof MyChildClass; // true
obj instanceof MyClass; // true
obj instanceof myMixin; // true
You're making a game with a little ship which shoots space-bound rocks before
they can bash into it. Both the ship and the rocks have position and velocity
properties. You could make a class, which provides a move
method, which they
would both inherit from. However, that could be the beginning of a class
hierarchy and you've heard bad things about those being hard to modify in the
future. JavaScript also has no way to do multiple inheritance with classes, so
your options are limited with classes anyway.
Instead you make the wise choice to use mixomatic
! You use mixomatic to create
a mixin called movable
, which takes a time difference and uses it to update
the position of its host object.
const movable = mixomatic({
move: {
value(dt) {
this.position.x += dt * this.velocity.x;
this.position.y += dt * this.velocity.y;
},
configurable: true,
enumerable: false,
writable: true
}
});
Since there'll only be one ship, you define it directly as an object and apply
movable
to it to give it the move
method.
const ship = {
position: { x: 0, y: 0 },
velocity: { x: 0, y: 0 }
};
movable(ship);
Asteroids are more numerous and can appear in all sorts of places, so you decide to go with a class for those.
class Asteroid {
constructor(position, velocity) {
this.position = { x: position.x, y: position.y };
this.velocity = { x: velocity.x, y: velocity.y };
}
}
movable(Asteroid.prototype);
Now both ship
and Asteroid
instances will have the move
method, and will
both appear to be instances of movable
, yet are not part of the same class
hierarchy. All sorts of behaviour can be written as mixins (for example, the
ship can fire missiles, and so can UFOs).
This is useful because mixins can be tested in isolation, and you can avoid
duplication of tests for mixed properties by using an instanceof
check in the
test suites of host objects like ship
and Asteroid
.