2012年11月28日 星期三

[分享] 範例續談 event emitter - explain how event emitter works for js Class

EventEmitter

之前有介紹過 Event Emitter 程式運作基本架構,通常大家在瀏覽器中經常使用 Event 註冊方法,設置 callback 讓程式能夠採用 event-driven 的方式進行。

在 Node.js 裡面,很多時刻是面臨到自己要去設計程式流程,而不是只有等待某個程式建立好之後,我們去使用而已。

在程式的觸發上,今天來介紹一下到底程式開發上有什麼差異。

引用例子

這邊採用車子加油的例子來說好了。

完整程式範例

舊有架構

如果採用舊有的架構,首先我們要有一台車子,這台車子是沒有加油的狀態。

function Car() {
    _oil = 0
}

module.exports = Car;

接著要開個開口(_addOilHandler),讓車子可以加油,這是一台聰明車,所以可以自動把油加滿。

  _addOilHandler = function () {

    if(_oil >= 100) {

      _oil = 100;

    } else {

      _oil += _oilInterval;

      // call self again.
      setTimeout(function() {
        _addOilHandler(_oilInterval);
      }, INTERVAL);
    }   

  };
看起來,一個會自動加油的車子就這樣子建構完成。

接著,程式要執行了,雖然這是一台會自動加油的車子,不過身為操作者的我們,還是要去檢查是否加油已經加滿,否則我們也不知道什麼時候可以開車。

以下就是檢查的方式。

var OldCar = require('./OldCar');
var bubu = new OldCar();

bubu.setOilInterval(10);
bubu.start();

看起來好像沒有什麼問題,可是卻發現,車子油加滿之後,並沒有進行任何通知,因此我們要增加進行持續檢查的機制。不斷的回頭看一下,什麼時候油滿了沒,持續詢問,當滿的時候才顯示訊息,因此增加程式如下,

(function () {
  if (bubu.getCurrentOil() >= 100) {                                                                                                                                              
    console.log('[STATUS] setTimeout Oil is full');
  } else {
    setTimeout(arguments.callee, 50);
  }
})();

Event driven 全新架構

看起來上面的車子已經很聰明了,不過似乎少了一點什麼,如果車子內部機制調整一下,當一開始的時候就跟車子說,油加滿請跟我說,當油真的加滿的時候,請回應給我,因此調整一下新車架構。

function Car() {

  var Emitter = require('events').EventEmitter,                                                                                                                                   
      emitter = new Emitter();
      
  const FINISH_EVENT = 'add_oil_done';

}
先將事件觸發的功能擺入,這邊先慶幸自己是採用 Node.js ,已經提供了 EventEmitter 機制,讓車子可以進行全新改裝。

接著要將接口打開,提供一個人車端口,讓我們可以跟車子說,『當油加滿的時候請通知我』,程式如下,

  addOil = function (callback) {
    emitter.on(FINISH_EVENT, callback);
    return this;
  };
接下來改進 _addOilHandler 程式,

這個時候改裝已經差不多,剩下回應的時間點,當油加滿之後,必須要將剛才使用者註冊的『當油加滿的時候請通知我』進行通知,因此需要有一個觸發點,觸發程式點就是在油量達到 100 的時候進行回饋。

  _addOilHandler = function () {

    if(_oil >= 100) {

      _oil = 100;
      emitter.emit(FINISH_EVENT, null, '[STATUS] Oil is full');

    } else {

      _oil += _oilInterval;

      // call self again.
      setTimeout(function() {
        _addOilHandler(_oilInterval);
      }, INTERVAL);
    }

  };

全新程式測試

看起來宇宙最夢幻的車子從此誕生,接下來進行最後人機測試。
var Car = require('./Car');
var bubu = new Car();

bubu.setOilInterval(10);
bubu.addOil(function (err, status) {
  console.log(status + ', [STATUS] callback mode');
}).start();

看起來的確程式簡潔許多,而且能夠在最準確的時間回應駕駛,讓我們知道什麼時候油可以加滿,立刻進行通知動作。

結語

可以從上面的程式改寫,看到在 event-driven 的差異。

以往的狀態,如果沒有使用事件驅動的方式,會導致需要使用不斷回頭檢查機制,進行確認,當然這樣並不會太難做,可是卻會浪費效能在回頭檢查上,而且會造成『檢查事件』的時間差異。

利用 Event emitter 的特長,可以在 Class 中簡單進行 Event-driven 的運作,讓操作行為更為簡單。

沒有留言:

張貼留言

Facebook