Javascript 如何通过控制器在模块中正确添加视图值？

实际上，标题中的整个问题，我有一个用HTML编写的按钮，假设这是我的视图，它返回一个数字：

export class View {

    addItem() {
        let plus = document.querySelector('.plus');
        plus.addEventListener('click', () => {
            let num = document.querySelector('.count').innerHTML;
            return num;
        })
    }
}

下面是我的带有addNum函数的模块，它实际上应该向数组中添加一个数字：

export class Module {
    constructor() {
        this.num = [];
    }


    addNum(num){
        this.num.push(num);
    }

}

这里是控制器：

class Controller {
    constructor(view, module){
        this.view = view;
this.module = module;
    }

    getNum(){
        this.cart.addNum(this.view.addItem());

    }
}

---

问题是，当我调用getNum控制器函数时，它会立即工作，我如何才能等待事件？

这可以通过RxJS可观察对象自然地处理。它们非常适合于此类用途，即构建反应式UI，并广泛应用于各种场合

一个可观察的基本上是一个可以转换并最终订阅的价值流。它与另一个答案中提出的承诺有很多共同之处，但是一个可观察的结果是一系列的值，而一个承诺则是一个值

RxJS包含广泛的功能，包括对DOM事件的支持。RxJS

fromEvent

（请参阅）替换

addEventListener

，并创建可映射到另一个值（表单输入值）的点击事件流：

在应接收值的位置订阅可观测值：

getNum(){
  this.numSubscription = this.view.addItem().subscribe(num => {
    this.module.addNum(num);
  });
}

通过取消订阅一个可观察的

this.numSubscription.unsubscribe（）

，可以停止值流。这将在内部触发

removeEventListener

给你

getNum(){
  this.numSubscription = this.view.addItem().subscribe(num => {
    this.module.addNum(num);
  });
}