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; // trueAlso works with classes!
class MyClass {}
myMixin(MyClass.prototype);
const obj = new MyClass();
obj instanceof MyClass; // true
obj instanceof myMixin; // trueAnd inheritance!
class MyChildClass extends MyClass {}
const obj = new MyChildClass();
obj instanceof MyChildClass; // true
obj instanceof MyClass; // true
obj instanceof myMixin; // trueYou'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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent