Question

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

尝试从控件中分离倒数计时器。倒数计时器正在工作，但我不知道如何让类计数器和类控件以某种方式'适合'在一起。

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

计划是在Controls内设置eventlisteners和处理程序。我们得到的值例如+ 5分钟用于更改其内部的会话/休息长度。但是控制需要访问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）。 / p>

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

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

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

1 个答案: