2010-12-16 100 views
3

我無法找到如何實現這一點(我的自由泳紀錄道歉):自定義事件(觀察者模式)

//assign the event handler for the object "myObj"  
myObj.onMyEvent = //do something 

//if something happened somewhere, then run the event 
MyEvent.fire(); 

的想法是,我們所說的(產生)一些自定義事件(MyEvent)。我們有一個對象「myObj」,它能夠識別「MyEvent」的發生並以某種方式(用他自己的方式)來回應它。 另外,我們還有其他對象(不同種類),(以他們自己的方式)對「MyEvent」做出反應。

我知道有「觀察者模式」,但我找不到具體的實現。

您能告訴我該在哪裏閱讀嗎? 或者在自然界通常是不可能的? 或者它完全不同?

更新1:沒有JS庫,請(jQuery的,原型,YUI,...)

+0

這可能是太含糊得到有用的迴應。一般來說,觀察者模式很容易實現,並且有很多來源可以完全解釋它(包括維基百科),我還推薦Freeman和Freeman的'Head First Design Patterns',否則,只需google它。) – jakev 2010-12-16 08:41:56

+2

@Jake'頭首先設計模式'的目標是在Java,因此沒有大的幫助的JavaScript。內部工作是完全不同的。 – 2010-12-16 09:23:01

回答

10

沒有JS庫,請(jQuery的,原型,YUI,...)

我會認真的重新考慮這個要求。所有這些庫已經多次解決了這個或類似的問題。

但是如果你想從頭開始,做這樣的事情:

window.customEvents = { 
    handlers : { 
     foo:[], 
     bar:[], 
     baz:[] 
    }, 

    registerEventHandler:function(event, object, handler){ 
     if(typeof(customEvents.handlers[event])=="undefined") 
      customEvents.handlers[event]=[]; 
     customEvents.handlers[event].push([object, handler]); 
    }, 

    fireEvent:function(eventName, data){ 
     if(customEvents.handlers[event]){ 
      for(var i = 0; i < customEvents.handlers[event].length; i++){ 
       var handlerPair = customEvents.handlers[event][i]; 
       handlerPair[1](handlerPair[0], data); 
      } 
     } 
    }, 

} 

用法:

// register event handler 
customEvents.registerEventHandler(eventName, targetObject, handlerFunction) 

// fire event 
customEvents.fireEvent(eventName, data) 

// handlerFunction will be passed two parameters: targetObject and event data 
+0

我根據你的回答提出了我的解決方案,謝謝,它有效。 – Kalinin 2010-12-17 08:40:07

+0

@Kalinin感謝您的反饋 – 2010-12-17 08:42:04

3

我的解決辦法:

var customEvents = { 
      _handlers : {}, 

      subscribe: function(event, handler){ 
       if(typeof(this._handlers[event])=="undefined") 
        this._handlers[event]=[]; 
       this._handlers[event].push(handler); 
      }, 

      fire:function(event, data){ 
       if(this._handlers[event]){ 
        for(var i = 0; i < this._handlers[event].length; i++){ 
         this._handlers[event][i](data); 
        } 
       } 
      } 
    }; 


var myObj1 = new function(){ 
     this.handler = function(data){ 
      console.log(data+'1'); 
     }; 
     customEvents.subscribe("greatEvent", this.handler); 
    }; 



var myObj2 = new function(){ 
     this.handler = function(data){ 
      console.log(data+'2'); 
     }; 
     customEvents.subscribe("greatEvent", this.handler); 
    }; 


//if something happened somewhere, then run the event 
customEvents.fire("greatEvent", 'ta-da');