Javascript Singleton 设计模式和闭包答案

【问题标题】：Javascript Singleton design pattern and closureJavascript Singleton 设计模式和闭包
【发布时间】：2012-02-25 05:30:39
【问题描述】：

我正在尝试创建一个处理事件侦听器服务的单例对象：

var ChildParent = (function () {
   var html_element = document.getElementById("quoteNum");
   var row_number = 0;

   return {
       init: function(){
           html_element["parenttype"+row_number].addEventListener("click", ChildParent.fire, false);
       },
       add: function(total) { //Adding a row

       },
       fire: function() {
           alert("it fired!");
       }
   } 
})();

但是，当我调用 ChildParent.init() 时，文档元素不会分配给 html_element，因此我无法附加侦听器。奇怪的是，row_number 变量被初始化为零。是否存在某种我不理解的范围冲突？当我使用 Opera 的蜻蜓的步入功能时，在 init() 函数中我无法创建 var 赋值。

【问题讨论】：

quoteNum 是一个
元素。 parenttype0 是
中的一个元素，我使用它来列出记录的父/子关系（报价和发票）。
那是输入的id？ html_element 是 null 还是返回 undefined 的 html_element[...]？

var ChildParent = (function () { function getElement(){ return html_element ? html_element : html_element = document.getElementById("quoteNum"); } var html_element; var row_number = 0; return { init: function(){ getElement()["parenttype"+row_number].addEventListener("click", ChildParent.fire, false); }, add: function(total) { //Adding a row }, fire: function() { alert("it fired!"); } } })();

【解决方案2】：

上面的代码是在 id 为quoteNum 的元素存在于DOM 之后执行的吗？

如果不是html_element 将是null。

因此，请确保所有上述代码都在一个脚本标记中，该标记出现在该元素下方的文档中某处（或者在 window.onload jQuery 的文档就绪类型事件中）。

【讨论】：

它从 body.onload 函数中调用。我使用了蜻蜓的步入功能来确保文档元素存在。我采取的步骤如下：我踏入了身体装载。我跟踪了对 ChildParent.init() 的函数调用。我使用 javascript 控制台来验证元素是否已加载。我可以看到页面上的元素。
@zshfalcon init() 为时已晚。当ChildParent 的初始化程序运行时，您的html_element 变量会被分配。
我现在明白了。感谢您的帮助！