如何在模块化JS中监听变量并触发onChange事件实现进度更新

嘿，我懂你的困扰了——.change()方法是专门给DOM元素（比如表单输入框、下拉选择器这类）用的，压根没法直接监听普通JavaScript变量的变化，所以报错是正常的。下面给你两种适配你现有代码结构的实现方式，都能搞定监听this.progress并自动更新UI的需求：

方法一：用Getter/Setter封装进度变量 #

最简单的方式就是把progress封装成带getter和setter的属性，这样每次给它赋值时，自动触发UI更新逻辑：

const qwData = {
  // 用下划线开头的变量存实际值，避免和getter/setter重名
  _progress: 0,
  
  // 封装progress属性
  get progress() {
    return this._progress;
  },
  set progress(newValue) {
    this._progress = newValue;
    // 赋值的同时直接调用更新UI的方法
    this.updateProgressDisplay(newValue);
  },

  init: function() {
    this.cacheDom();
    this.bindEvents();
    // 初始化进度值
    this.progress = 0;
  },

  cacheDom: function() {
    // 这里放你的DOM缓存逻辑，比如：
    this.progressBar = document.querySelector('.your-progress-bar-selector');
    this.chartPercentText = document.querySelector('.your-chart-percent-selector');
    // 你之前cacheDom里的其他变量也放在这
  },

  bindEvents: function() {
    // 这里不用再绑定change事件啦，setter会自动处理更新
    // 其他需要绑定的DOM事件可以继续放在这
  },

  // 专门用来更新UI的方法
  updateProgressDisplay: function(percent) {
    // 更新进度条的宽度
    this.progressBar.style.width = `${percent}%`;
    // 更新图表上的百分比文本
    this.chartPercentText.textContent = `${percent}%`;
  }
};

// 别忘了初始化
qwData.init();

之后你只要像qwData.progress = 30这样赋值，UI就会自动跟着更新了。

方法二：用Proxy监听对象属性（适合多属性监听） #

如果你之后可能需要监听更多变量，用Proxy会更灵活，它能监听整个对象的属性变化：

// 先创建原始的基础数据对象
const baseData = {
  progress: 0
};

// 创建Proxy代理，监听属性变化
const qwData = new Proxy(baseData, {
  set(target, propName, value) {
    target[propName] = value;
    // 只有当progress属性变化时，才更新UI
    if (propName === 'progress') {
      this.updateProgressDisplay(value);
    }
    return true;
  }
});

// 把你的其他方法挂载到代理对象上
Object.assign(qwData, {
  init: function() {
    this.cacheDom();
    this.bindEvents();
  },

  cacheDom: function() {
    this.progressBar = document.querySelector('.your-progress-bar-selector');
    this.chartPercentText = document.querySelector('.your-chart-percent-selector');
  },

  bindEvents: function() {
    // 其他事件绑定逻辑
  },

  updateProgressDisplay: function(percent) {
    this.progressBar.style.width = `${percent}%`;
    this.chartPercentText.textContent = `${percent}%`;
  }
});

qwData.init();
// 测试一下：设置进度值，UI自动更新
qwData.progress = 75;

为啥之前的.change()没用？ #

再啰嗦一句，.change()是DOM元素的事件，它监听的是用户和页面元素交互导致的状态变化（比如输入框内容改变），普通JS变量没有这个事件，所以直接调用肯定会报错啦。

你可以根据自己的需求选：如果只是监听progress这一个变量，第一种方法足够简单；如果之后要监听多个属性，Proxy会更方便。

内容的提问来源于stack exchange，提问作者Imnotapotato