将 jQuery 对象分配给 Javascript 对象以进行事件绑定的首选方法是什么？

Question

例子：

我想创建一个多窗口 webapp。每个窗口都是一个 jQuery 对象（附有一个 DOM 元素），但它也应该有特定的属性和方法（例如close() 或minimize()）。看来，我应该创建一个类MyWindow，其属性DOMElement 将包含jQuery 对象。

但是如何将 DOM 事件绑定到 MyWindow 对象？

我可以做类似MyWindow.DOMElement.on('click', function(){...} 的事情。但是DOMElement 不知道它附加到哪个MyWindow，并且如果需要，将无法操纵它的属性。例如，它不能调用它的MyWindow 的close() 方法。

我目前看到了两种解决这个问题的方法。

首先。使用单个属性myWindow 扩展MyWindow.DOMElement 属性中的jQuery 对象，该属性将指向对象的父对象MyWindow 对象。

第二个。 使用MyWindow 的属性扩展jQuery 对象，并使其成为instanceof MyWindow（也许是通过寄生继承？）。这样，事件处理程序将可以通过使用this 访问MyWindow 的所有属性和方法。

这两种方式都显得有些奇怪。

将 DOM 对象分配给 Javascript 对象以进行事件绑定的首选方法是什么？

Answer 1

我基本上会按照你在第一个解决方案中所说的那样做：

MyWindow 对象包含 dom 元素的相关 jquery 对象作为其属性之一：

var MyWindow = function(params) {
  this.close = function() {/*close window*/};
  this.minimise = function() {/*minimise window*/};
  this.$elm = $('#'+params.id);
  // do all the other stuff you have to do to initialise the window

  this.$elm.myWindow = this;
}

然后绑定一个点击：

window1 = new MyWindow({id: 'window'});
window1.$elm.on('click', function() {
  this.close();
});

编辑： 我最近使用的另一种方法是拥有一个单独的事件处理程序，将事件路由到正确对象的正确方法，但这需要您跟踪哪些 id 对应于哪些对象如下代码所示：

var myWindows = [];

var MyWindow = function(params) {
  // initialise object

  myWindows[params.id] = this;
};

$(function() {
  $(document).on({
    click: function(e) {
      var myWindow = myWindows[$(this).attr('id')];
      if (typeof myWindow.click === 'function') {
        myWindow.click(e);
      }
    }
  }, '.myWindow');
};

然后您只需向对象添加适当的方法即可绑定事件

var myWindow = new MyWindow({'id': window});

myWindow.click = function(event) {
  this.close();
};

但是，这种方法的危险在于，您必须非常小心地保持 myWindows 数组为最新，否则会出现各种内存泄漏（显然，这种方法的难度/重要性取决于您应用的上下文)。