繼承和原型事件

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(); 
}); 

我希望有幫助。