자바 스크립트에서 이벤트 기본 클래스를 만드는 방법은 무엇입니까?

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

    }; 

}; 

내가 지금은 이벤트를 할당 할 다른 개체에이 추가되어 할 수 없습니다. 예를 들어 다른 객체는 draw 메서드가있는 간단한 사각형입니다.

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

프로토 타입 Events()에서 의 프로토 타입을 addEvent() 상속 받겠다 고 잘못 생각하지 않는다면.

Object.create을 사용할 때는 new을 사용하지 않으므로 new Object.create(Events.prototype)은 잘못되었습니다.

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

을하지만, Object.create 아래 인터넷 익스플로러 8에서 지원되지 않습니다, 그래서 어쩌면 당신은 오히려이 기능을 사용하십시오 :이 작업을 수행 할 수

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

에 대한 몇 가지 패턴이있다 자바 스크립트에서 상속, 이것은 단지 그들 중 하나입니다. 다른 사람들을 배우고 싶다면 Stoyan Stefanov의 책 JavaScript Patterns을 살펴보세요. 어쨌든이 일을 할 것입니다.

보시다시피, 임시 함수 F()를 자식과 부모 사이의 링크로 사용합니다. 우리는 children.prototype = parent.prototype을 할 수 있었지만, 어떤 시점에서 children.prototype에서 어떤 것이 바뀌면 실제로 parent.prototype을 바꿀 것입니다. 아마도 우리는 그것을 원하지 않을 것입니다.

우리는 이것을 원하지 않습니다 : Rect.prototype = new Events(). Rect.prototype을 Event의 프로토 타입과 연결할 수도 있지만, 그렇게했다면 this 키워드로 이벤트에 선언 된 모든 항목이 Rect에 추가 될 것입니다. 예를 들어 이벤트에 this.whatever = 'value'이 포함 된 경우 whatever이 Rect.prototype에 추가됩니다.

그래서 당신은 단순히 설명 상속 함수를 호출하고이 방법으로는 인수로 두 가지 기능을 전달할 것 :

inherit(Rect, Events); 

을 그리고 Rect.prototype 후, 이벤트의 프로토 타입의 방법을 상속하는 것입니다.

Answer 2

jquery를 사용하는 경우 도움이 될 수 있습니다.

$(selector).addEvents(); 

은 내가 당신을 도울 것입니다 희망을 다음과 같이

$.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) { 

    }; 

}; 

지금, 위의 함수를 호출합니다. 감사합니다.