继承和原型事件

Question

看完这篇文章https://msdn.microsoft.com/en-us/magazine/ff852808后，我试着创建一个对象WindowSingle，用新的构造函数创建的对象表现为一个窗口 - 当有人按下右上角的“X”按钮时，窗口关闭（div CSS设置为显示：无;）：

var WindowSingle = function(obj) { 
 
    this.obj = obj; 
 
    this.isHidden = false; 
 
    this.obj.show(); 
 
    this.events.click.call(this); 
 
}; 
 
WindowSingle.prototype.Close = function() { 
 
    this.isHidden = true; 
 
    this.obj.closest('.window').hide(); 
 
}; 
 
WindowSingle.prototype.events = { 
 
    'click': function() { 
 
    var self = this; 
 
    var obj = this.obj; 
 
    obj.find('.closeX').on('click', function() { 
 
     self.Close(); 
 
    }); 
 
    } 
 
}; 
 
$(document).ready(function() { 
 
     myWindowSingle = new WindowSingle($("#myWindow")); 
 
    });

.window { 
 
    border: 1px solid grey; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    display: none; 
 
    width: 250px; 
 
} 
 
.closeX { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 230px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="window" id="myWindow"> 
 
    <span class="closeX">X</span> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div>

我的问题是：

1. 该如何事件可以更优雅的方式在一般的或类似的处理方式： WindowSingle.prototype.events = { 'click .closeX': function() { 如流星
2. 为什么的 obj.find('.closeX').on('click',self.Close);
   简单的调用（正如我写简单的jQuery事件）将无法正常工作。

提前致谢！

Answer 1

第一个问题的答案非常简单。要通过所有可能有一个CSS选择器的事件循环，就做这样的事情：

var WindowSingle = function (obj) { 

    this.obj = obj; 
    this.isHidden = false; 
    this.obj.show(); 
    this.registerEvents(); 

}; 

WindowSingle.prototype.registerEvents = function() { 

    var self = this; 

    Object.keys(self.events).forEach(function (key) { 

     var parts = key.split(" "); 

     // Handle CSS selector. 
     if (parts[1]) { 

      self.obj.on(parts[0], parts[1], function() { 
       self.Close(); 
      }); 

     // Handle no CSS selector. 
     } else { 

      self.obj.on(parts[0], function() { 
       self.Close(); 
      }); 

     } 

    }); 

} 

的.on('click',self.Close)问题是更先进一点。在这种情况下，事件将被绑定到点击事件，问题是函数的上下文（this意味着什么）。 jQuery总是将事件处理程序的上下文设置为DOM元素，但在这种情况下，您需要将它作为您的WindowSingle实例。解决这个问题的两个办法是绑定上下文或者创建一个新的函数。

var self = this; 

// Bind the context. 
obj.find('.closeX').on('click', self.Close.bind(self)); 

// Create a new function. 
obj.find('.closeX').on('click', function() { 
    self.Close(); 
}); 

我希望有帮助。