javascript - 将音频播放器分解为 MVC 结构

标签 javascript model-view-controller

想象一个音频播放器可以完成 3 件主要事情:

  • 操作和创建数据(进度长度、时间换算、体积计算等)
  • 监听用户交互/输入并触发数据操作或 GUI 组件的可见性
  • 在屏幕上显示和更新 GUI 组件。

您会将以上哪一项放在 MVC 中的哪个位置?

我在想: - 首先是模型的一部分 - 第二个 Controller - 第三个 View

但是,我不完全确定这就是我问的原因。

最佳答案

数据操作和创建应由模型处理。

View 将是实际的 GUI,包含所有控件,例如播放/暂停/音量等。每个控件都有与其关联的事件,例如 play_click、pause_click、volume_up 等。

演示者将为这些 View 事件提供事件处理程序。每当事件发生时,关联的处理程序就会执行,从而根据需要引起模型和/或 View 的更改。

例如,如果模型包含 volume 属性,并且 View 引发 volume_up 事件,则演示器中的 onVolume_up 事件处理程序将执行,导致模型的 volume 属性增加,并相应地更新 View 。

请注意,演示者不依赖于 View 。因此明天您就可以更改整个 GUI,而无需接触演示者或模型。

您可以自己手动设置所有这些,或使用像 Knockoutjs 这样的框架.

关于javascript - 将音频播放器分解为 MVC 结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39044651/

相关文章:

javascript - 如何实现这个继承模式: object. object.method

java - MVC : Can a service depend on other service?

javascript - 如何向 requirejs r.js 优化器添加仅在构建期间运行的插件?

javascript - JavaScript 文件中的代码如何获取文件的 URL?

JavaScript:循环中的 setTimeout 仍然不起作用

asp.net-mvc - MVC DDD : Is it OK to use repositories together with services in the controller?

JQuery 函数似乎需要刷新 "back"按钮

java - 将 map 作为请求参数发送到 Spring Boot 应用程序中的 GET 请求

java - 如何在 Java FX FXML 应用程序中的模型和 View 之间进行通信?

javascript - 使用 useState Hook 引用函数状态时关闭