Событие наследования и прототипирования

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) вопрос немного более продвинутым. Событие будет связано с событием click в этой ситуации, проблема в контексте функции (что означает 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(); 
}); 

Надеюсь, что это поможет.