Question

阅读本文https://msdn.microsoft.com/en-us/magazine/ff852808之后，我尝试创建一个对象WindowSingle，使用新构造函数创建的对象表现为一个窗口 - 当有人按下＆＃34; X＆＃34;右上角的按钮，窗口关闭（div＆c; css设置为display：none;）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的问题是：

如何以更优雅的方式处理此事件，例如： WindowSingle.prototype.events = { 'click .closeX': function() { 如在流星中
为什么简单的呼唤 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();
});

我希望有所帮助。

继承和原型制作事件

1 个答案: