如何将这两个类结合在一起？

Question

这是我第一次尝试做 OOP，并做了一个简单的番茄钟计时器。 https://codepen.io/hyrosian/project/editor/XpjOPR

曾尝试将倒数计时器与控件分开。倒数计时器正在工作，但我不确定如何让类计数器和类控件以某种方式“适合”在一起。

const counter = new Counter(DOMnode)
const controls = new Controls()

计划是在Controls 中设置事件监听器和处理程序。我们得到值，例如+5 分钟用于更改其中的会话/休息时间。但是 Controls 需要访问 Counter 内部的状态。

class Controls extends Time {
    constructor() {
        super()
        this.session_btn = document.querySelectorAll('[data-session]')
        this.break_btn = document.querySelectorAll('[data-break]')
    }

    handleBreak(e) {
        console.log(e.target.dataset.break)
    }

    handleSession(e) {
        console.log(e.target.dataset.session)
    }

    init() {
        this.session_btn.forEach(btn => btn.addEventListener('click', this.handleSession))
        this.break_btn.forEach(btn => btn.addEventListener('click', this.handleBreak))
    }
}

将它们组合在一起的正确方法是什么？

编辑：为什么投反对票？

Answer 1

Controls 应该有一个对 Counter 对象的引用，而不是相反。

Controls 可以通过请求 (getTime, getState) 来访问状态。如果Controls 需要订阅某个事件（计时器已用完），那么Counter 可以发出这样的事件。

基本思想是 Counter 是一个完全隔离的对象，只维护自己的状态和计时器，但 Controls 是处理来自用户的事件（并可能在需要时更新 DOM）。

这是一个很常见的模式。在这种情况下，Counter 通常称为模型，Controls 称为控制器。

您应该首先创建Counter，并将其作为构造函数参数传递给Controls