如何在 Javascript 中正确使用 mixin

2023-12-19

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

我遇到了这个library https://github.com/kmalakoff/mixin并认为这可能是一个不错的选择,因为它允许您在运行时混合输入和输出。另外,我可以只拥有一个基类(BaseView),然后将其混合。

问题

  1. 有哪些有用的 Mixin 的实际应用示例? (请不要再举抽象的例子了)
  2. 我是否需要扩展类,或者我可以使用这个库来管理所有扩展和混合?

另请参阅:

  • stackoverflow.com ::JavaScript 中的特征 https://stackoverflow.com/a/23770385/2627243
  • stackoverflow.com ::Javascript 特征模式资源 https://stackoverflow.com/q/6977226

如果涉及 JavaScript 和基于角色的组合方法(例如 Mixins 和 Traits),我同时非常固执己见。我总是会指出两种与库无关的纯粹基于函数的模式的组合 - 首先是模块模式,其次是“Flight Mixin”模式,因为 Angus Croll 在 2011 年 5 月重新发现、命名和描述了它。但我也建议阅读我2014年4月的一篇论文。

  • 重新审视 JavaScript Mixins http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins
  • JavaScript 在泛化面向角色的编程方法(如 Traits 和 Mixins)方面具有许多才能 http://peterseliger.blogspot.de/2014/04/the-many-talents-of-javascript.html#the-many-talents-of-javascript

问题

  • 1) 有哪些有用的 Mixin 的实际应用示例? (请不要再举抽象的例子了)
  • 2)我是否需要扩展类,或者我可以使用这个库来管理所有扩展和混合?

回答你的2个问题...

1st) [Observable]可能是现实世界中最常见的例子之一Mixins。但这不是提供其整个代码库的正确位置。不断增长的例子聪明人才 chapter http://peterseliger.blogspot.de/2014/04/the-many-talents-of-javascript.html#smart-talent-patterns确实提供了一个的工作实现[Queue]一开始只是使用不同的工厂Mixins like [Enumerable] and [Allocable]但最后也应用了已经提到的[Observable].

2)只需使用您选择或需要的模块系统 -CommonJS 或 AMD http://www.2ality.com/2014/09/es6-modules-final.html。然后,您的工厂模块甚至实例/对象会通过委托检索其他行为;因此他们积极地做call / apply the Mixin or Trait模块。

最后 - 缩短的示例代码:

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; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Javascript 中正确使用 mixin 的相关文章

随机推荐

  • 如何通过uploadcare中的rest api删除文件

    我正在尝试使用 jquery ajax 删除 uploadcare Rest api 中的文件 这是我当前的 jquery 代码 ajax url http api uploadcare com files photoguid val ty
  • ASP.NET 5添加WCF服务参考

    在 Visual Studio 2015 预览版 预发行版 中 如何添加服务引用WCF服务 目前 这是一个相当复杂的过程 因为该工具似乎不太支持生成 WCF 客户端代码或从配置文件自动映射的方式 另外 正如 dotnetstep 指出的那样
  • 如何更改默认版权模板

    每当我在 xcode 中创建一个新文件时 它都会在文件顶部放置类似的内容 Copyright MyCompanyName 2008 All rights reserved 我怎样才能把它变成有用的东西 Update 在这里找到了答案 htt
  • 是否可以在 R Shiny 中动态设置小部件选项?

    作为一个最小的工作示例 An app with a datatable whose pagination option we can toggle with a button library shiny runApp list ui bas
  • 如何使用 d3.js 为线条添加动画?

    所以我的线从图表的一侧延伸到另一侧 但它并没有真正通过每个数据点进行动画处理 我认为我必须在某处添加一个循环 这是相关代码 任何帮助将不胜感激 assign start coordinates for each piece of data
  • 创建 AngularJS ACL 的最佳方法是什么? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想与您 社区 分享我的问题 I use MEAN堆栈 所以我使用Node js with Express and AngularJS
  • 如果有条件执行任务,异步方法应该做什么?

    假设我有一个等待任务的方法 该方法还返回一个任务 例如 public async virtual Task Save String path if NewWords Any await FileManager WriteDictionary
  • React-Native 另一个 VirtualizedList 支持的容器

    升级到react native 0 61后 我收到很多这样的警告 VirtualizedLists should never be nested inside plain ScrollViews with the same orientat
  • iOS开发:收到Game Center邀请时,如何获取GKMatch对象?

    我正在构建一款使用 Game Center 的 iPhone 游戏 但我很难理解如何开始一场通过收到朋友的玩邀请而开始的比赛游戏 这docs http developer apple com library ios documentatio
  • 根据给定值构造新的哈希值

    我似乎迷失了尝试实现以下目标 我尝试了一整天 请帮助 I HAVE h kv1001 gt impressions gt b gt 0 245 a gt 0 754 visitors gt b gt 0 288 a gt 0 711 ctr
  • 如何设置java keytool的默认语言?

    我使用带有英语和美式键盘设置的 Windows 操作系统 我使用这个命令来生成密钥库 效果很好 C java6 jre bin keytool genkey keyalg RSA alias mykey validity 3652 keys
  • 如何使用钩子通过一个事件处理函数动态更新任何输入字段的值

    TL DR 有没有一种方法可以通过一个事件动态更新输入字段的值 处理函数就像我们对有状态组件所做的那样 我正在制作一个包含 2 个字段的登录表单 电子邮件和密码 当我使用 2 个 useState 代表两个字段时 当我使用 handleCh
  • R过滤掉一个子集

    我有一个数据框A 和一个包含 A 子集的 data frame B 如何创建一个 data frame C 它是 data frame A 且排除了 data frame B 感谢您的帮助 获取 A 中 B 中没有的行 C A data f
  • 如何在 Eclipse 中从自动构建中排除一个项目?

    如何在 Eclipse 中从自动构建中排除一个项目 我的工作区中有一个项目 该项目可能构建很长 即使没有任何更改 我想保持这个项目打开以浏览源代码 但我不需要它一直在构建 如何禁用该项目的自动构建 这可能是 Eclipse 中的一个错误ht
  • 引发“System.Windows.Forms.AxHost+InvalidActiveXStateException”类型的异常

    我在我的简单项目中遇到错误 这是我的代码 if axZKFPEngX1 InitEngine 0 label1 Text Connected else label1 Text Connection Failed 我已经添加了参考复合材料Ax
  • 从实体框架中删除单个记录?

    我在实体框架中有一个名为的 SQL Server 表employ具有名为的单个键列ID 如何使用实体框架从表中删除单个记录 不必先查询对象 您可以通过其 id 将其附加到上下文 像这样 var employer new Employ Id
  • 如何提取Go内置函数代码,例如delete()

    我在go src go src builtin builtin go 中找到了内置函数 如下 func delete m map Type Type1 key Type 但这不是源代码 谁能告诉我内置函数的源代码在哪里 builtin go
  • 运行 npm 命令时 -- 做什么?

    例如 双破折号或两个连字符 像这样使用 npm test coverage Running npm没有双破折号标志不会在覆盖模式下运行 因此它似乎附加了后续标志 这是正确的吗 我找不到这方面的文档 作为参数本身在所有 UNIX 命令中都是标
  • const 用于非引用参数

    如果我有这个代码 void Foo aBasicType aIn Where aBasicType is int char etc 制作它有什么意义吗const aBasicType因为无论如何它都会被复制 我问的原因之一是因为我在第 3
  • 如何在 Javascript 中正确使用 mixin

    我正在组织一个小型企业应用程序 但希望尽可能干燥 因此 我一直在研究 mixin 库 我遇到了这个library https github com kmalakoff mixin并认为这可能是一个不错的选择 因为它允许您在运行时混合输入和输