ES 6课 - Mixins [英] ES 6 Classes - Mixins
问题描述
我提出了View（HTML标记）和实用程序（JavaScript - 行为）体系结构，并使用ES6类创建了用于构建视图和实用程序的原子类。将有一个需要，可以将多个实用程序类组合/混合到单个视图类中。
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 will be a need that multiple utility classes can be composed/mixed into a single view class.
ES6 Class API如何提供混合类（es ）到另一个/主类。我看过 Object.assign ，但这是对象而不是类级别。
How can ES6 Class API provide a way to mix-in class(es) into another/main class. I've looked at Object.assign but that is for objects and not at class-level.
推荐答案
现在JavaScript类，希望以后也可以
只能相互扩展，但不能混合
。如果有的话，那么最有可能的是 轻量级特征
会在一天内将其作为规范。
JavaScript classes right now and hopefully also in future only can be extended from each other but can not be mixed into one another. If at all, then most probably Lightweight Traits do make it into the specification one day.
它的架构方法是针对JavaScript的。
在过去几年中经常被提到...
esdiscuss.org：»关于轻量级traits«，
github.com/WebReflection：»功能::与«，
webreflection.blogspot.com：»未来友好，向后兼容的类实用程序，
reddit.com/r/javascript：»ECMAScript 2015中的功能组合«，
raganwald.com：»ECMAScript 2015中的功能混合物« ...
，可能是最好的比较到安格斯Croll的 Flight Mixins 。
Its architectural approach is specific to JavaScript. It has been mentioned quite often in the last few years ... 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« ... and possibly is best compared to Angus Croll's Flight Mixins.
基于纯功能的Mixin / Trait方法... 这不是关于Javascript中的特征的文章，
许多»人才的JavaScript ...
做最接近什么OP要求，除非有
类似于...
Pure function based Mixin/Trait approaches ... This is not an essay about 'Traits in Javascript', The many »Talents« of JavaScript ... do come closest to what the OP has ask for unless something similar to ...
// 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土地。
... was shipped to ECMAScript land.
这篇关于ES 6课 - Mixins的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
