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

例如：

我想创建一个多窗口webapp。每个窗口都是一个jQuery对象（附带一个DOM元素），但它也应该具有特定的属性和方法（例如

close（）

或

minimize（）

）。这样看来，我应该创建一个类

MyWindow

，其中包含jQuery对象的属性

doElement

但是如何将DOM事件绑定到

MyWindow

对象

我可以在（'click'，function（）{…}上执行类似于

MyWindow.domeElement.on的操作。但是
domeElement
不知道它附加到哪个
MyWindow
上，如果需要，它将无法操作它的属性。例如，它将无法调用它的
MyWindow
的
close（）
方法

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

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

第二。使用
MyWindow
的属性扩展jQuery对象，并使其成为
MyWindow
的
实例（可能通过寄生继承？）。这样，事件处理程序就可以通过使用
This
访问
MyWindow
的所有属性和方法

这两种方式似乎都有点奇怪

将DOM对象分配给Javascript对象以进行事件绑定的首选方法是什么？
我基本上会按照您在第一个解决方案中所说的做：

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阵列的最新状态，否则会出现各种内存泄漏（显然，这一点的难度/重要性将取决于您的应用程序的上下文）。
我基本上会按照您在第一个解决方案中所说的做：

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数组的最新状态，否则会出现各种内存泄漏（显然，这一点的难度/重要性将取决于应用程序的上下文）。
为什么不绑定构造函数中的单击？
…this.$elm=$（'#'+params.id）；this.$elm.on（'click'，function（）{…}）.
@exizt，因为我假设您希望对不同的窗口进行不同的事件处理-我是否误解了？不，事件处理代码由每个窗口重复使用。它只使用窗口的属性来决定后续操作。为什么不在构造函数中绑定click？
…这。$elm=$（“#”+params.id）；this.$elm.on（'click'，function（）{…}）.
@exizt，因为我假设您希望对不同的窗口进行不同的事件处理-我是否误解了？不，事件处理代码由每个窗口重复使用。它只使用窗口的属性来决定后续操作。