Question

我正在尝试从acticle from css-tricks实现模块模式这是我的回归对象：

var MyModule = (function() {
  var pSettings; //private context

  return {
      settings: {
          time: Date.now(),
          myBtn: document.getElementById('myBtn')
      },

      init: function () {
          pSettings = this.settings;
          this.bindUIActions();
      },

      bindUIActions: function () {
          pSettings.myBtn.onclick = someFunction;
          console.log('binding');
      },

      someFunction: function() {
          console.log('someFunction');
      }
  }
})();

Fiddle

当我使用MyModule.init（）时，出现myBtn is null

之类的错误

未捕获的TypeError：无法设置属性'onclick'为null

，为什么会这样？

Answer 1

这可能与时间有关。首次定义我的模块时正在执行document.getElementById('myBtn')，这可能是在解析HTML文档之前，因此myBtn尚不存在。

MyModule内的对象及其所有属性都是在首次定义和创建MyModule时创建的。 myBtn属性是一个静态值，在首次创建属性时初始化。如果您希望它是仅在需要时评估的函数，那么您必须使它成为您可以在所需时间调用的函数。

你有几种方法可以解决它。

您可以停止尝试预取myBtn DOM元素，只在需要时根据需要获取它。
您可以将此javascript移动到<body>标记的末尾，或将其放入某种就绪函数中，以便在DOM准备好之前不会执行。
您可以在首次使用时（当DOM准备就绪时）而不是提前缓存myBtn。
当DOM准备就绪时，您可以将myBtn属性的初始化更改为.init()方法。

我的建议是第一个选择。

为什么getElementById在模块模式中返回null

1 个答案: