ES 6 Classes - Mixins

Question

I\'m coming up with View (HTML markup) and Utility (JavaScript - behavior) architecture and creating atomic classes for composing views and utilities using ES6 Class. There

Answer 1

There is a really nice pattern with ES2015 classes (which I don't necessarily endorse as such) to create mixins by Sebastian Markbage, which I've slightly adapted.

The utility function mixinClasses can be used to mix in class factories (aka factory functions that return classes) into your new class:

function mixinClasses(...mixins) {
  // TODO: Add all possible method names that might call super()
  // to the base class so that they don't throw.
  return mixins.reduce((base, mixin) => {
      return mixin(base);
  }, class {});
}

Which can be used as follows, for example with the two factory functions Foo and Bar:

const Foo = base => class extends base {
  myFn() {
  }
};

const Bar = base => class extends base {
  myFn() {
    super.myFn();
  }
};

class Baz extends mixinClasses(Foo, Bar) {
  myFn() {
    super.myFn();
  }
}