javascript - 如何在 Javascript 中正确使用 mixins

Question

我正在组织一个小型企业应用程序，但希望尽可能 DRY。因此，我一直在研究 mixin 库。

我遇到了这个库，并认为它可能是一个不错的选择，因为它允许您在运行时混入和混出。另外，例如，我可以只拥有一个基类（BaseView），然后将其混入。

问题

1. 有哪些有用的 Mixins 的实际应用示例？（请不要再抽象的例子）
2. 我什至需要扩展类还是可以只使用这个库来管理所有扩展和混合？

Answer 1

mixin只是一个不同的概念，关于如何组织代码和继承。您当然可以将它与使用经典继承或原型继承结合起来，但可以这么说，它也可以独立工作。

例如，我们将真正从多个其他对象“形成”新的独立对象，而不是创建“委托”对象属性/查找（如原型继承）。这有时也称为“多重继承”，仅靠Javascript原型继承无法轻松实现。

举个例子：

var pianist = {
   play: function() {}
};

var programmner: {
   code: function() {}
};

现在我们可以创建另一个Object，比如

var Jim = Object.create( null ); // create a fully self-defining object

extend( Jim, pianist );
extend( Jim, programmer );

这个伪extend方法可能看起来像（ES5）：

function extend( target, source ) {
    Object.getOwnPropertyNames( source ).forEach(function( key ) {
        Object.defineProperty( target, key, Object.getOwnPropertyDescriptor(source, key)) });

    return target
}

---

我实际上没有正确回答您的问题，但我觉得您的问题没有真正的答案。它与您将要使用的一样真实，实际上没有“特定于应用程序”的用例。

Answer 2

另请参阅：

• stackoverflow.com :: javascript 中的特征
• stackoverflow.com :: Javascript Traits 模式资源

如果涉及到 JavaScript 和基于角色的组合方法，如 Mixins 和 Traits，我同时非常固执己见。我总是会指出 2 个纯基于函数的模式的库不可知组合 - 首先是模块模式，其次是“Flight Mixin”模式，因为它已被 Angus Croll 在 2011 年 5 月重新发现、命名和描述。但我也建议阅读2014 年 4 月我的一篇论文。

• 重新审视 JavaScript Mixins
• JavaScript 的许多才能概括面向角色的编程方法，如 Traits 和 Mixins

问题

• 1) 有哪些有用的 Mixins 的实际应用示例？（请不要再抽象的例子）
• 2）我什至需要扩展类还是可以只使用这个库来管理所有扩展和混合？

回答你的2个问题...

1st)可能是Mixins[Observable]在现实世界中最常见的例子之一。但这不是提供其整个代码库的正确位置。Smart Talents章节中不断增长的示例确实提供了工厂的工作实现，该工厂在一开始只是使用不同的Mixins，但最终也应用了已经提到的.[Queue][Enumerable][Allocable][Observable]

2nd）只需使用您选择或需要的模块系统 - CommonJS 或 AMD。然后，您的工厂模块甚至实例/对象会通过委托检索其他行为；因此他们积极地做/ callMixin或Trait模块。apply

最后 - 缩短的示例代码：

var Observable_SignalsAndSlots = (function () {

  var
    Event = function (target, type) {

      this.target = target;
      this.type = type;
    },

    EventListener = function (target, type, handler) {

      var defaultEvent = new Event(target, type);

      this.handleEvent = function (evt) {
        /* ... */
      };
      this.getType = function () {
        return type;
      };
      this.getHandler = function () {
        return handler;
      };
    },

    EventTargetMixin = function () {

      var eventMap = {};

      this.addEventListener = function (type, handler) {
        /* ... */
      };
      this.dispatchEvent = function (evt) {
        /* ... */
      };
    }
  ;

  return EventTargetMixin;

}).call(null);


var Queue = (function () {

  var
    global = this,

    Observable  = global.Observable_SignalsAndSlots,
  //Allocable   = global.Allocable,

    Queue,

    onEnqueue = function (queue, type) {
      queue.dispatchEvent({type: "enqueue", item: type});
    },
    onDequeue = function (queue, type) {
      queue.dispatchEvent({type: "dequeue", item: type});
    },
    onEmpty = function (queue) {
      queue.dispatchEvent("empty");
    }
  ;

  Queue = function () { // implementing the [Queue] Constructor.
    var
      queue = this,
      list = []
    ;
    queue.enqueue = function (type) {

      list.push(type);
      onEnqueue(queue, type);

      return type;
    };
    queue.dequeue = function () {

      var type = list.shift();
      onDequeue(queue, type);

      (list.length || onEmpty(queue));

      return type;
    };
    Observable.call(queue);
  //Allocable.call(queue, list);
  };

  return Queue;

}).call(null);


var q = new Queue;

q.addEventListener("enqueue", function (evt) {console.log("enqueue", evt);});
q.addEventListener("dequeue", function (evt) {console.log("dequeue", evt);});
q.addEventListener("empty", function (evt) {console.log("empty", evt);});

console.log("q.addEventListener : ", q.addEventListener);
console.log("q.dispatchEvent : ", q.dispatchEvent);

console.log("q.enqueue('the') ... ", q.enqueue('the'));     // "enqueue" Object {type: "enqueue", item: "the", target: Queue}
console.log("q.enqueue('quick') ... ", q.enqueue('quick')); // "enqueue" Object {type: "enqueue", item: "quick", target: Queue}
console.log("q.enqueue('brown') ... ", q.enqueue('brown')); // "enqueue" Object {type: "enqueue", item: "brown", target: Queue}
console.log("q.enqueue('fox') ... ", q.enqueue('fox'));     // "enqueue" Object {type: "enqueue", item: "fox", target: Queue}

console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "the", target: Queue}
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "quick", target: Queue}
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "brown", target: Queue}
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "fox", target: Queue}
                                              // "empty"   Object {target: Queue, type: "empty"}
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: undefined, target: Queue}
                                              // "empty"   Object {target: Queue, type: "empty"}

.as-console-wrapper { max-height: 100%!important; top: 0; }

Answer 3

我们使用一个名为Cocktail的 mixin 库（mixins...明白吗？）。它专门用于 Backbone 应用程序，但非常好。

我们已经写了关于我们的使用模式的详细信息，这些细节比我在这里描述的要好。

Answer 4

在面向对象的设计模式中，目标是尽可能地消除继承，因为继承是不灵活的并且将不相关的实体混杂在一起。您应该对接口进行编程，而不是对实现进行编程。将变化的部分与保持不变的部分分开。设计模式以策略模式的形式引入了委托的概念。但是由于 JavaScript 的动态特性，我们也可以很容易地使用 mixins 的概念来区分变化的和保持不变的。

选择 mixins 的另一个原因是，由于 JavaScript 是一种原型语言，它通过原型链将对象链接在一起，但是如果你过度使用这个特性，你会发现在巨大的链中链接原型很慢。

事实上，通过使用 mixins，您可以直接将功能添加到对象的原型中，而不是链接原型，从而减少查找算法的开销。因此，例如，下面我们创建两个单例对象“speak”和“fly”。这些是实现行为的对象。不同的东西可以说话和飞翔，但那些不同的东西不应该相互继承。例如，您可能有一只野鸭和一只鹦鹉。

var speakable = {
    speak: function(){ return this.name + " speaks" }
}

var flyable = {
    fly: function(){ return this.name + " flies" }
}

在 jQuery 世界中以及在 ES6 的干净类语法之前，您可以使用构造函数添加 mixins，如下所示：

var MallardDuck = function(name){
  this.name = name;
}

var Parrot = function(name){
  this.name = name;
}

$.extend(MallardDuck.prototype, speakable, flyable);
$.extend(Parrot.prototype, speakable, flyable);

var duck = new MallardDuck('Bob');
var parrot = new Parrot('Jane');
console.log(duck.speak());
console.log(parrot.speak());

在没有 jQuery 和 ES6 之前的情况下，如果您想通过 mixin 工具扩展具有功能的对象，那么您可以简单地编写自己的扩展 mixin 工具：

function extend(target){
  // if no mixin objects are provided, then return out of function
  if(!arguments[1])
    return;

  // the first argument is the target object we want to mix behavior into, so we start our loop at index 1
  for(var i = 1; j = arguments.length; i < j; i++) {
    // grab the singleton object to mixin into target
    var source = arguments[i];

    for(var propr in source) {
      // ensure we do not override a property that target already has
      if(!target[prop] && source.hasOwnProperty(prop)){
        target[prop] = source[prop];
      }
    }
  }
}

我们可以利用 ES6 中的 Object.assign 属性，而不是依赖像 jQuery 这样的外部库（强烈反对这种简单的目的），或者编写我们自己的实用程序 mixin 工具。此外，我们可以在 ES6 类中使用它。Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。

const speakable = {
    speak: function(){ return `${this.name} speaks`; }
}

const flyable = {
    fly: function(){ return `${this.name} flies` }
}


class MallardDuck {
  constructor(name) {
    this.name = name;
    Object.assign(MallardDuck.prototype, speakable); // add the mixin to prototype chain. Alternatively, use 'this' to add directly to the new object being created
  }
}

class Parrot {
  constructor(name) {
    this.name = name;
    Object.assign(Parrot.prototype, speakable); // add the mixin to prototype chain. Alternatively, use 'this' to add directly to the new object being created
  }
}

const duck = new MallardDuck('Mallard Duck');
const parrot = new Parrot('Parrot');
console.log(duck.speak());
console.log(parrot.speak());