如何在JavaScript中創建事件基類？

Question

我正在嘗試爲我製作的一個小畫布庫製作事件類！

這是我到目前爲止，

function Events() { 

}; 

Events.prototype.addEvents = function() { 

    this.mousemove = false; 
    this.onMousemove = function() { 

     if (this.mousemove) { 
      this.mousemove(); 
     } 
    }; 
    this.mousedown = false; 
    this.onMousedown = function() { 

     if (this.mousedown) { 
      this.mousedown(); 
     } 
    }; 
    this.mouseup = false; 
    this.onMouseup = function() { 

     if(this.mouseup) { 
      this.mouseup(); 
     } 
    }; 
    this.click = false; 
    this.onClick = function() { 

     if (this.click) { 
      this.click(); 
     } 
    }; 
    this.on = function(type, callback) { 

    }; 

}; 

什麼我不能做的就是現在這個添加到我想要分配上的事件的其他對象。例如，另一個對象可能是一個簡單的具有繪製方法的矩形。

function Rect() { 

    this.draw = function(context) { 
     // code 
    }; 
}; 

// How can I add Events prototype properties to Rect? I have tried... 
// Rect.prototype = new Object.create(Events.prototype); 
// Rect.prototype = Object.create(new Events.prototype); 

我基本上想要事件原型將其所有的屬性給予我想要發生事件的另一個對象？

謝謝，我希望我有道理！

Answer 1

所以，如果我沒有弄錯你想讓Rect()的原型繼承Events()原型的方法addEvent()。

您在使用Object.create時不使用new，所以new Object.create(Events.prototype)是錯誤的。你可以這樣做：

Rect.prototype = Object.create(Events.prototype); 

但隨後，的Object.create不支持Internet Explorer 8和下面，所以也許你寧願使用此功能：

function inherit(children, parent) { 
    var F = function() {}; 
    F.prototype = parent.prototype; 
    children.prototype = new F(); 
    children.prototype.constructor = children; 
}; 

有幾種模式供JavaScript中的繼承，這只是其中之一。如果你想學習別人，你可以看看斯托揚·斯特凡諾夫的書JavaScript Patterns，但無論如何，這個人將會完成這項工作。如你所見，它使用一個臨時函數F（）作爲孩子和父母之間的一個鏈接。我們可以完成children.prototype = parent.prototype，但是如果我們在某些時候改變了children.prototype中的某個東西，我們實際上將會改變parent.prototype - 我們可能不希望這樣。

我們也不想這樣做：Rect.prototype = new Events()。這也會將Rect.prototype與Event的原型聯繫起來，但是如果我們這樣做了，那麼在Events中使用關鍵字this聲明的任何內容都將被添加到Rect中 - 這是我們可能不希望發生的事情。例如，如果活動包含this.whatever = 'value'，則whatever將被添加到Rect.prototype。

所以，你根本就調用描述繼承功能，並通過這兩個函數作爲參數，以這樣的方式

inherit(Rect, Events); 

而且Rect.prototype的話，是要繼承的事件原型的方法。

Answer 2

如果您使用jQuery，這可能會對您有所幫助。

$.fn.addEvents = function() { 

    this.mousemove = false; 
    this.onMousemove = function() { 

     if (this.mousemove) { 
      this.mousemove(); 
     } 
    }; 
    this.mousedown = false; 
    this.onMousedown = function() { 

     if (this.mousedown) { 
      this.mousedown(); 
     } 
    }; 
    this.mouseup = false; 
    this.onMouseup = function() { 

     if(this.mouseup) { 
      this.mouseup(); 
     } 
    }; 
    this.click = false; 
    this.onClick = function() { 

     if (this.click) { 
      this.click(); 
     } 
    }; 
    this.on = function(type, callback) { 

    }; 

}; 

現在，調用上面的功能如下：

$(selector).addEvents(); 

我希望這會幫助你。 謝謝。