javascript - JavaScript 中的模块模式

Question

我正在练习我的 JS 技能(我是新手)。我正在尝试获取触发事件的特定元素并将其显示在 span 元素中。但我不知道我做错了什么，当我点击按钮时没有任何反应。

这是我正在做的一个计算器程序，但我认为它使用的是模块模式。

var Calculator = {
  init: function(){
    var button = document.querySelectorAll("[class^='button']");
    button.onclick = this.writeEvent;
  },
  write: function (element){
    document.getElementById("display").innerHTML = element;
  },
  writeEvent: function(event){
    write(target.event)
  }
}

Calculator.init();

Answer 1

发布的代码有几个问题。

---

    var button = document.querySelectorAll("[class^='button']");
    button.onclick = this.writeEvent;

querySelectorAll 的结果是一个 NodeList。分配给它的 onclick 属性将无法实现您想要的。您想要分配给每个单独节点的 onclick 属性。

但实际上并没有那么简单，我们需要回到这个问题上。

---

  writeEvent: function(event){
    write(target.event)
  }

这里的一个问题是 target 是未定义的。您肯定是指 event.target。

另一个问题是 write 也是未定义的。也许你的意思是 this.write，但这实际上不会很好地工作。问题是当从点击事件调用 writeEvent 时，它不会在对象上调用，所以 this 不会绑定(bind)到计算器对象，this.write 调用将引发异常。

有一种方法可以克服这个问题，通过在设置对象时将 onclick 处理函数绑定(bind)到对象。

---

综合以上:

var Calculator = {
  init: function() {
    var nodeList = document.querySelectorAll("[class^='button']");
    var callback = this.writeEvent.bind(this);
    nodeList.forEach(item => item.onclick = callback);
  },
  write: function(element) {
    document.getElementById("display").innerHTML = element;
  },
  writeEvent: function(event) {
    this.write(event.target);
  }
}

Calculator.init();