Javascript Singleton设计模式和闭包

Javascript Singleton design pattern and closure

本文关键字：闭包 设计模式 Singleton Javascript      更新时间：2023-09-26

我正在尝试创建一个Singleton对象，用于为事件侦听器提供服务：

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.ini（）时，document元素将不会被分配给html_element，因此我无法附加侦听器。奇怪的是，row_number变量被初始化为零。是否存在某种我不理解的范围界定冲突？当我使用opera的dragonfly的step into功能时，在init（）函数中无法创建var赋值。

执行脚本时，请确保页面上有id为"quoteNum"的元素
您可能在执行脚本时没有等待所有页面元素的呈现。

你可以考虑处理window.onload.

更新

以下更改可以帮助您解决在呈现页面之前初始化htmlElement的问题。

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!");
       }
   } 
})();

在DOM中存在id为quoteNum的元素后执行的上述代码吗？

如果不是，则html_element将是null。

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

相关文章：