1

我有一个包含视频的组件：<div class="component"><video src="..." /></div>.

现在我想通过两种方式管理播放的状态：

  1. 侦听可以通过单击本机播放/暂停按钮来更改的播放状态并对其进行处理（更改组件布局，通知其他组件......）

  2. 通过让我们说从外部手动触发播放myComponent.playContent()

我不知道如何正确管理这个。例如，当用户单击本机视频控件时，将play调度一个事件。当我手动调用myComponent.playContent()which 调用domVideo.play()时，play事件也会被调度，所以如果我只是监听play事件，它会被混淆或调用两次等。

问题是这里混合了两种不同的东西。

首先，可以通过用户单击本机控件来触发播放开始，在这种情况下，我想捕获事件并对其进行各种处理。这是典型的“冒泡”，自下而上的流程。

其次，程序（通常是组件） 希望以“自上而下”的方式触发播放，在这里我想区分触发的事件以避免将其视为用户创建的播放事件。

我多次遇到这个问题，例如 ExtJS 的选项卡面板（tabchange事件）中的选项卡更改事件，我不知道如何在基于事件的编程范例中解决这个问题。

我正在寻找一个通用的解决方案或正确的方法。它不仅仅是关于原生 DOM 事件。我有一个 YT.Player（YouTube 播放器）对象，它有自己的事件，具有相同的模型，我遇到了同样的问题。

编辑：一些技巧setTimeout和取消是可能的，但我想避免这种情况。

4

1 回答 1

0

我不确定 DOM 的细节，但让我告诉你它在 Flex / Flash Player 中是如何工作的，它也是客户端、基于事件的运行时 / 编程模型。

因此，让我们有一个组件 C（例如，您示例中的视频播放器）和一个应用程序 A - 只是包含您的组件的东西（可以是子应用程序、应用程序模块等；我们称之为application）。

组件的公共 API 是这样的：

component VideoPlayer
    function play()
    event playStateChange

我将描述两种情况，一种没有 MVC 框架（“准系统”解决方案），另一种有 MVC 框架。

1）没有任何MVC框架

应用程序需要引用该组件并在某处调用类似这样的内容：

videoPlayer.addEventListener("playStateChange", function() {...})

如果它需要在 VideoPlayer 上开始播放，它只需调用

videoPlayer.play();

简单的。

（我不明白你在问题底部描述的问题，即为什么调用 play() 应该再次调度相同的事件 - 在 Flex 中，程序员需要明确地这样做，这可能是一个错误；当然如有必要，调度不同命名的事件可能是有意义的，但那是另一回事。）

2) 使用 MVC 框架

Flex 应用程序通常非常大，具有单独的屏幕、内容窗格、容器、组件等深度嵌套的层次结构，因此应用程序直接引用应用程序中的所有组件可能不切实际。

因此，MVC 框架（命名不正确，我们暂且不说……）通常提供一个中央事件总线，应用程序的不同部分可以通过该总线进行通信。因此，有了这个框架，应用程序中任何地方的任何代码都可以执行以下操作：

eventBus.dispatchEvent("globalPlayEvent")

并且组件（VideoPlayer）在其实例化过程中会做这样的事情：

eventBus.addEventListener("globalPlayEvent", function() {
    play();
}

相反方向的通信将是相似的 - 组件只会在一些已调度的全局事件/事件总线上调度“playStateChange”，任何感兴趣的人都可以处理它。在这个模型中，你不依赖于我认为好的事件冒泡。

这回答了你的问题了吗？

于 2012-04-26T14:23:47.987 回答