ES 6类-混合

Question

我提出了视图(HTML markup)和实用工具(JavaScript - behavior)架构，并使用ES6类创建原子类来组合视图和实用工具。将需要将多个实用程序类组合/混合到单个视图类中。

ES6类API如何提供一种将类混合到另一个/主类中的方法。我已经研究过Object.assign，但它是针对对象的，而不是类级别的。

Answer 1

现在和希望将来，JavaScript类只能相互扩展，但不能混合在一起。如果有的话，那么最有可能的是轻量级特征有一天会被写入规范中。

它的架构方法是特定于JavaScript的。在过去的几年里，它经常被提及……esdiscuss.org：»about lightweight traits«，github.com/WebReflection反射：»features :: with«，webreflection.blogspot.com：»A future friendly, backward compatible, class utility«，reddit.com/r/javascript：»Functional Mixins in ECMAScript 2015«，raganwald.com：»Functional Mixins in ECMAScript 2015« ...和安格斯·克罗尔的相比可能是最好的。

基于纯函数的混合/特征方法... This is not an essay about 'Traits in Javascript'，The many »Talents« of JavaScript ...一定要最接近行动人员的要求，除非有类似的东西...

//  proposed trait syntax ...       //  ... desugared e.g. to ...

trait Enumerable_first_last {       //  var Enumerable_first_last = (function () {
  // trait body.                    //    // mixin module.
                                    //
  const                             //    var
    FIRST = function () {           //      first = function () { // shared code.
      return this[0];               //        return this[0];
    },                              //      },
    LAST = function () {            //      last = function () {
      return this[this.length - 1]; //        return this[this.length - 1];
    }                               //      }
  ;                                 //    ;
                                    //
  applicator () {                   //    return function Enumerable_first_last () {
    // applicator body.             //      // mixin body.
                                    //
    this.first = FIRST;             //      this.first = first; // referencing ...
    this.last = LAST;               //      this.last = last;   // ...  shared code.
  }                                 //    };
                                    //
}                                   //  }());

..。

//  proposed trait syntax ...       //  ... desugared e.g. to ...

trait Enumerable_item {             //  var Enumerable_item = (function () {
                                    //
  const                             //    var
    ITEM = function (idx) {         //      item = function (idx) {
      return this[                  //        return this[
        Math.floor(                 //          Math.floor(
          parseFloat(idx, 10)       //            parseFloat(idx, 10)
        )                           //          )
      ];                            //        ];
    }                               //      }
  ;                                 //    ;
                                    //
  applicator () {                   //    return function Enumerable_item () {
                                    //
    this.item = ITEM;               //      this.item = item;
  }                                 //    };
                                    //
}                                   //  }());

..。

//  proposed trait syntax ...       // ... desugared e.g. to ...

trait Enumerable_first_last_item {  //  var Enumerable_first_last_item = (function () {
                                    //
  use Enumerable_first_last;        //    return function Enumerable_first_last_item() {
  use Enumerable_item;              //
/*                                  //      Enumerable_first_last.call(this);
  applicator () {                   //      Enumerable_item.call(this);
    // can be omitted if empty.     //    };
  }*/                               //
}                                   //  }());

..。

                                      //  ... desugared e.g. to ...
                                      //
class Queue {                         //  var Queue = (function () {
                                      //
//use Allocable;                      //    return function Queue () {
  use Observable;                     //      var list = [];
                                      //
  constructor () {                    //      this.enqueue = function (type) {
    const list = [];                  //
                                      //        list.push(type);
    this.enqueue = function (type) {  //        return type;
                                      //      };
      list.push(type);                //      this.dequeue = function () {
      return type;                    //
    };                                //        return list.shift();
    this.dequeue = function () {      //      };
                                      //
      return list.shift();            //    //Allocable.call(this, ...);
    };                                //      Observable.call(this);
  }                                   //    };
                                      //
}                                     //  }());
                                      //
var q = new Queue;                    //  var q = new Queue;
                                      //
q.enqueue(9);                         //  q.enqueue(9);
q.enqueue(8);                         //  q.enqueue(8);
q.enqueue(7);                         //  q.enqueue(7);
                                      //
console.log(q.dequeue());             //  console.log(q.dequeue());
console.log(q.dequeue());             //  console.log(q.dequeue());
console.log(q.dequeue());             //  console.log(q.dequeue());
                                      //
console.log(q);                       //  console.log(q);
console.log(Object.keys(q));          //  console.log(Object.keys(q));

..。被运到了ECMAScript陆地。

Answer 2

有一个用ES2015类创建混合by Sebastian Markbage的非常好的模式(我不一定认可它)，我稍微调整了一下。

实用函数mixinClasses可用于将类工厂(也称为返回类的工厂函数)混合到新类中：

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 {});
}

例如，它可以通过两个工厂函数Foo和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();
  }
}