javascript事件匯流排

banq發表於2009-12-24
JavaScript事件
事件模式是介面層主要模式，MVC模式中，模型元件應該和介面形成松耦合，只要介面發出事件，就應該立即響應，MVC模式也是依靠事件模式來實現彼此聯絡，所以，有時，我們拋開MVC模式這個鍋蓋，專注於事件模式，反而會有一種比較開闊的感覺。

Javascript可以避免錯誤型別的共享，以及避免UI介面執行緒，這樣實現事件模式就非常簡單(相對Java等語言)，

[URL=http://blogs.msdn.com/simonince/archive/2009/12/21/a-javascript-event-bus.aspx]A JavaScript Event Bus[/URL]一文給出了Javascript的事件匯流排event bus實現案例。

使用一個Event Bus接受所有的事件，然後釋出給所有的監聽者：

Type.registerNamespace('Sample')
 //建立一個事件匯流排
Sample.EventBus = function() {
    Sample.EventBus.initializeBase(this);
}
 
Sample.EventBus.prototype = {
    //一對一啟用提交事件
    subscribe: function subscribe(eventType, callback) {
        this.get_events().addHandler(eventType, callback);
    },
    //一對多廣播發布事件
    publish: function publish(eventType, arg) {
        var handler = this.get_events().getHandler(eventType);
        if (handler)
            handler(arg);
    }
}
 
Sample.EventBus.registerClass('Sample.EventBus', Sys.Component);
<p class="indent">

事件型別eventType用來標識傳給匯流排訊息型別，是一個重要的輸入引數，當然我們可以使用字串來實eventType，比如"mySendEvent"，但是使用一個和目標target繫結機制可能更好，如下：

Sample.EventBus.registerEventType =
   function registerEventType(target, eventType) {
    if (!target.Events)
        target['Events'] = {};
    target.Events[eventType] = eventType;
}
<p class="indent">


使用註冊事件型別如下：

// simple class to carry data values with event
//建立一個帶有事件資料的物件
Sample.Payload = function(dataValue) {
    this.data = dataValue;
}
 
// definition of event types relevant to Payload class
Sample.EventBus.registerEventType(Sample.Payload, 'Update');
//註冊Click點按事件
Sample.EventBus.registerEventType(Sample.Payload, 'Click');
<p class="indent">


我們可以使用下面程式碼啟用事件：

//廣播群發事件
bus.publish(Sample.Payload.Events.Update, new Sample.Payload('Some Data'));
//一對一啟用一個事件，類似MVC中Controller或Action
bus.subscribe(Sample.Payload.Events.Update, function(arg) {
    // perform some action
});
<p class="indent">


這個事件匯流排可以加入更多功能：日誌logging, 跟蹤tracing, 轉換translation, or 定期執行scheduled execution(切分啟用動作單獨執行，非同步，這樣可以避免堵塞UI執行緒)。

相比伺服器端的事件模式，JS實現起來夠簡單。

原始碼案例下載

相關文章