javascript 中的数据上下文交互 (DCI) 和事件编程

Posted 2023-02-24

【中文标题】javascript 中的数据上下文交互 (DCI) 和事件编程

【英文标题】：Data-Context-Interaction (DCI) and evented programming in javascript

【发布时间】：2012-09-28 20:30:15

【问题描述】：

我最近看到了 Trygve Reenskaug 关于 DCI 的以下演示： https://vimeo.com/43536416 这让我大吃一惊。嗯，在代码中看到软件不同组件之间的交互是一个很有吸引力的想法。

我试图在 javascript 中找到 DCI 的示例，但没有成功。然后我开始怀疑。 DCI模式不是和事件编程模式相对吗？

事件编程在 javascript 中很流行，我猜是因为它允许解耦，并且因为经典的继承概念不是 js 原生的。我想我了解事件编程的好处，但我也注意到当需要跟踪事件消息时，调试可能会非常困难。

说这两个概念是对立的对吗？还是我弄错了？是否有一些我错过的 js 中 DCI 的示例实现？为了挖掘这个概念，我应该看什么？

【参考方案1】：

首先，事件编程或继承与 DCI 正交。您可以在没有继承和事件编程（或没有）的情况下进行 DCI。

在某些方面，JavaScript 是执行 DCI 的最佳语言之一。大多数语言在严格遵循 DCI 方面存在一些问题。在 JavaScript 中，如果有终结器，则可以解决问题，但缺少终结器意味着您将不得不“处理”您自己，这意味着一些 noilerplate 代码。

我用 JavaScript 编写了一个示例，我将在 http://fullOO.info 上在线发布，您可以在其中找到 Trygve、Jim 和我与其他人一起创建的示例。

fullOO.info 也是您可以去哪里更熟悉 DCI 的答案，或者您可以加入 object-composition 的 Google 小组讨论 DCI。

我用 JS 编写的示例是规范的 DCI 示例汇款，有趣的部分（除了样板/库代码之外的所有内容）如下所示：

var moneyTransferContext = function(sourcePlayer, destinationPlayer, amount) 
    var source = 
            withdraw: function() 
                var text = "Withdraw: " + amount;
                this.log.push(text);
                this.balance -= amount;
                console.log("Balance: " + this.balance);
            
        ,
        destination = 
            deposit: function() 
                var text = "Deposit: " + amount;
                this.log.push(text);
                this.balance += amount;
                console.log("Balance: " + this.balance);
            
        ;
    source = assign(source).to(sourcePlayer);
    destination = assign(destination).to(destinationPlayer);
    return 
        transfer: function() 
            source.withdraw();
            destination.deposit();
            return this;
        
    ;
,
sourceAccount = 
  log: [],
  balance: 100
,
destinationAccount = 
  log: [],
  balance: 0
;

moneyTransfer(sourceAccount, destinationAccount, 25).transfer().unbind();

其余的可以在http://jsfiddle.net/K543c/17/看到

【讨论】：

非常感谢，非常有趣。回家后我会研究代码。但是您能详细说明 dci 和 evented 之间的区别吗？一个组件发送事件并由另一个组件侦听的事件不是组件之间的交互吗？当我观看folk.uio.no/trygver/themes/babyide/babyide-index.html 时，我想到了一些事件。这些天来，事件被用于 js webapps 中的所有内容。它们用于访问其他组件上的方法，而不是直接访问，以实现解耦并防止应用程序在一个组件中断时完全中断。

@olivvv 事件只是在对象之间发送消息的另一种方式。 DCI 关注的是在代码中捕获哪个对象向哪个对象发送哪个消息。您还可以将事件视为启动上下文的事物。因此，事件驱动与 DCI 正交，但我想您实际上指的是异步，这是完全不同的事情

不，我不是指异步，而是发布/订阅通信。例如，一个组件监视键盘和鼠标活动，并为其他组件广播事件以让他们知道用户是否处于活动状态。可以有很多组件在监听。上下文如何考虑到这一点？

@Olivvv 根据定义，DCI 中对象之间的所有通信都在一个上下文（每个通信对象网络的一个上下文）中捕获，因此您只需拥有通信的角色。也就是说，它目前是 DCI 的边界领土。

所以组件应该在上下文方法中处理事件？