为什么getElementById在模块模式中返回null [重复]答案

【问题标题】：Why getElementById returns null in module pattern [duplicate]为什么getElementById在模块模式中返回null [重复]
【发布时间】：2014-03-28 21:48:10
【问题描述】：

我正在尝试从 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 的错误

未捕获的类型错误：无法将属性“onclick”设置为 null

，为什么会这样？

【问题讨论】：

因为没有id为myBtn的元素。
对不起，我有这个元素。将更新小提琴

标签： javascript design-patterns

【解决方案1】：

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

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

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

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

我的建议是第一个选项。

【讨论】：

@baxxabit - 请再次阅读我写的内容。我试图向您解释，您在 'myBtn' 元素存在之前过早地初始化了 settings.myBtn 属性。
在你更新答案之前我已经写了评论，谢谢！
我使用angularjs模板，所以这是一个问题，为什么myBtn属性在模块中为空。感谢您的解释。在模板之前加载的模块
@baxxabit - 你也可以只在.init() 方法中初始化myBtn，而不是在DOM 准备好时的初始定义中。