如何在Javascript中正确使用mixins

本文介绍了如何在Javascript中正确使用mixins的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在组织一个小型企业应用程序，但我希望尽可能干。结果，我一直在看mixin库。

I am organizing a small enterprise application but would like to be as DRY as possible. As a result, I've been looking at mixin libraries.

我遇到了这个库并认为它可能是一个不错的选择，因为它允许您在运行时混合进出。另外，我可以只有一个基类（BaseView），只需混合即可。

I came across this library and thought it might be a good option as it allows you to mix in and out at run time. Also, I can just have one base class (BaseView) for instance and just mixin off of that.

问题

有用的Mixins的一些真实应用示例是什么？ （请不要再抽象示例）

我是否需要扩展类，或者我可以使用此库来管理所有扩展和混合？

推荐答案

请参阅：

• stackoverflow。 com :: javascript中的特征
• stackoverflow :: JavaScript特征模式资源

• stackoverflow :: Traits in javascript
• stackoverflow :: Javascript Traits Pattern Resources

如果涉及JavaScript和基于角色的作曲方法，如Mixins和Traits，我同时非常自以为是。我总是会指出一个图书馆不可知组合的2个基于功能的模式 - 首先是模块模式，其次是Flight Mixin模式，因为它已经被Angus Croll在2011年5月重新发现，命名和描述。但我也建议阅读我的论文从2014年4月开始。

If it comes to JavaScript and Role based composition approaches like Mixins and Traits, I'm meanwhile very opinionated. I always will point to a library agnostic mix of 2 purely function based patterns - firstly the module pattern and secondly the "Flight Mixin" pattern as it has been rediscovered, named and described by Angus Croll in May 2011. But I also would recommend reading a paper of mine from April 2014.

• 重新审视JavaScript Mixins
• 用于推广面向角色的编程方法的众多JavaScript人才喜欢Traits and Mixins

• A fresh look at JavaScript Mixins
• The many talents of JavaScript for generalizing Role Oriented Programming approaches like Traits and Mixins

问题

Questions

• 1）有用Mixins的一些实际应用示例是什么？ （请不再抽象示例）
• 2）我是否需要扩展类，或者我可以使用此库来管理所有扩展和混合？

回答你的2个问题......

Answering your 2 questions ...

1st） [Observable] 可能是 Mixins 最常见的真实示例之一。但这不是提供整个代码库的正确位置。来自的相继增长的示例智能人才章节确实提供了 [队列] 工厂的工作实现，该工厂在开始时只使用不同的 Mixins 喜欢 [Enumerable] 和 [Allocable] 但最后也应用已经提到的 [可观察] 。

1st) [Observable] probably is one of the most common real world examples for Mixins. But this is not the right place for providing its entire code base. The successively growing examples from the Smart Talents chapter do provide working implementations of a [Queue] factory that in the beginning just uses different Mixins like [Enumerable] and [Allocable] but finally also applies the already mentioned [Observable].

2）只需使用您选择或需要的模块系统 - CommonJS或AMD 。然后，您的工厂模块甚至实例/对象通过委派检索其他行为;因此他们主动致电 / 申请 Mixin 或 Trait 模块。

2nd) Just make use of a module system of your choice or need - CommonJS or AMD. Your factory modules or even instances/objects then do retrieve additional behavior by delegation; thus they actively do call / apply the Mixin or Trait modules.

最后 - 缩短示例代码：

finally - shortened example code:

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