将动态值传递给类参数

Question

我有一个变量，可在点击时更改其值。我还将这个变量传递给类的参数。根据此值，类中的某些函数可以返回不同的值。

但是，我知道实例仅被调用一次，并且尽管更改了变量的值，但类内的任何函数都没有被调用，因此在页面上什么也没有发生。这是我的代码：

class.js

export default class MyClass {
    constructor(params, uniqueId) {
        this.params = {
            ...params,
        };
        ...
        this.init();
     }
       init() {
            doSomethingHere();
       }
       doSomethingHere() {
            alert(this.params.myMode);
       };
}

app.hbs

<button class="foo">foo</button>
<button class="bar">bar</button>

app.js

import MyClass from './components/MyClass';

const myMode = 'foo';

const myParams = {
  myMode,
};

new MyClass(myParams);

// by clicking buttons I can change myMode's value
document.querySelector('.foo').addEventListener('click', () => changeMapMode('foo'));
document.querySelector('.bar').addEventListener('click', () => changeMapMode('bar'));

function changeMode(value) {
    myMode = value;
}

Answer 1

如果使用对象而不是字符串，则可以解决。例如：

app.js

import MyClass from './components/MyClass';

const myParams = {
  mode: 'foo',
};

new MyClass(myParams);

// by clicking buttons I can change myMode's value
document.querySelector('.foo').addEventListener('click', () => changeMapMode('foo'));
document.querySelector('.bar').addEventListener('click', () => changeMapMode('bar'));

function changeMode(value) {
    myParams.mode = value;
}

class.js

//...
constructor(params, uniqueId) {
   this.params = params;
   //...
}

编辑：

如果要在mode更改时执行某些操作，则需要手动添加侦听器或管理状态。或在更改状态后立即调用函数。

喜欢这个：

app.js

const myClass = new MyClass(myParams);
myClass.doSomethingHere();


function changeMode(value) {
  myParams.mode = value;
  myClass.doSomethingHere();
}