Question

示例：

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

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

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

我目前看到两种解决此问题的方法。

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

第二。使用MyWindow的属性扩展jQuery对象并使其成为MyWindow instanceof（通过寄生继承，也许？）。这样，事件处理程序可以通过MyWindow访问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数组是最新的，否则会出现各种内存泄漏（显然这个难度/重要性取决于你的app的上下文）。

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

1 个答案: