Question

我遇到了一个棘手的问题，虽然答案可能很明显，但我看不出该怎样做我想做的事。

我为我的应用程序创建了一个脚本库，它使用JS原型和模板来动态实例化DOM元素，并使用处理程序连接这些元素。一个例子如下：

var ppane = new AWP.iuiPanel(theObject, { title: 'Select filter(s)', idDisplay: 'block', idString: params.sender._options['title'] });

AWP.iuiPanel是一个定义为函数原型的类，例如：

AWP.iuiPanel = function() { <i'm a constructor> }
AWP.iuiPanel.prototype = { <a bunch of methods here> }

实例中的方法创建一个DOM元素（在本例中为浮动面板）并为其建立事件绑定，连接其控制元素等。

沿着这条路走下去的好处是通过一次调用来创建一个类的新实例，我也可以构建相关的DOM元素，并且一旦实例化，已连接的类方法将针对该元素执行做一些事情，比如相对于目标对象的位置，响应相关的浏览器事件等等。

我遇到的问题是当我想要处理这个构造时。我可以轻松地处理DOM元素。但是我仍然在内存中使用连接到浏览器事件的方法的类实例来查找已经处理的DOM元素。我需要不仅能够处理DOM元素，还能处理类实例，我无法弄清楚如何做到这一点。

如何处理一次声明的函数原型？这似乎应该很简单，但我发现事实并非如此。

有关背景信息，以下是我定义的类的示例：

这必然是伪代码（ish）......

AWP.trivialExample = function(someDomRef, someOptionSet) {
   this._id = someOptionSet['name'];
   this._width = someOptionSet['width'];
   this._width = someOptionSet['height'];
   this._domRef = someDomRef;
   this._object = '';

   this.constructDOM();
   this.wireEvents();

}

AWP.trivialExample.prototype = {

   constructDOM: function() {
      // build a complex DOM element relative to a provided DOM ref using the
      // desired and height.  This uses a template and I won't give a precise example
      // of such a template.
      jQuery("#aTemplate").tmpl(someJSONData).appendTo("body");

   },

   positionRelative: function() {
      // this function would get the location of a specific DOM ref and always maintain
      // a relative position for the DOM element we just constructed

   },

   wireEvents: function() {
      // hook up to events using JQuery (example)
      jjQuery(window).resize(this.positionRelative);

   }

}

上面是一个简单的例子，它将采用DOM对象引用，然后它将动态构造一个新的DOM元素，它将连接到浏览器事件，以便在页面大小时始终保持这两个对象之间的相对位置

当我处理新对象时，我还需要处理类实例，我找不到一种简单的方法来做到这一点。

所有帮助表示赞赏。

感谢;

Answer 1

关于引用已删除DOM节点的事件侦听器的建议：

就像你有'wireEvents'一样，如果你决定停止使用该对象，你应该有一个相应的'unwireEvents'。在这种情况下，addEventListener（）需要与removeEventListener（）一起使用。正如您所说，当相应的DOM节点被“处置”时，您应该修改原型以删除事件侦听器。

Answer 2

 AWP.iuiPanel.prototype = null; // ?

如何在JS中处理原型？

2 个答案: