跳到主要內容

[分享] 範例續談 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 的運作,讓操作行為更為簡單。

留言

這個網誌中的熱門文章

[分享] 腳踏車環島注意事項

很多人都期望自己能夠做點什麼,做些什麼,而退伍之後的第二個星期,就展開了環島之旅。 對很多人來說這不算什麼,甚至有人展開了走路、跑步、溜滑板、單輪車等方式環島一周,充分展現對台灣的愛與關懷。 這篇主要讓不知道怎麼準備環島的人,作一個完善的解說,首先隨身的東西要有: 證件現金類 : 身份證 健保卡 學生證 現金 提款卡 悠遊卡

館長的網站技術瓶頸,小弟弟來解答 - notorious-2019.com

館長的網站技術瓶頸,小弟弟來解答 - notorious-2019.com 昨天看到館長的網站倒了,也看到館長說一個月花費大概一百萬左右的月費在支持這個架設的電商網站,也對外發布出來訊息,希望求救, 直接講結論 建議解法, 1. 首先要做的事情是讓整個網站可以橫向擴展 (Load Balancer + n 台伺服器),對,相信我,IIS 也是可以做 Scale out, 這是對於 Application layer 服務的解法。 2. 資料的部分 SQL 吞吐量,建議改成 GCP Cloud SQL, 或者就直接轉到 Azure SQL Server 環境上會相對容易解決 SQL 的問題。 上述 2 個步驟都處理完,其實 100 萬的費用,應該 20000 concurrent user 是沒有問題的,但前提是要設定『對』! 額外需要花較長期時間要處理的,建議就是在 Queue 的處理,購物車的狀態都可以進入到 Queue 再來處理 SQL insert 的問題,減少不斷的 insert / update 的狀態,後文會提到 ... 底下詳細的會再說明如何後後續還有哪些處理的細節。 這兩天剛好有個小空擋,就來分析一下狀況, 可以從外部讀取得到的服務大致上如下, ASP.Net : 4.0 IIS 10 + Windows (廢話) SQL Server (推測) OP Service: PleskWin Host: Google Cloud DNS: Cloudflare 前端服務內容架構 Server-side render, jQuery base, 推測有可能採用現成購物車來進行,看起來不太像是用 wooCommerce 比較像是 Cart Functionality 這類的項目直接搭建而成(當然這純屬猜測) 功能拆解 因為網站是透過 Server site render 所有頁面都需要重新透過伺服器進行載入,這樣的狀況,如果在頻繁忙碌的 eCommerce 網站架構下會是一個致命傷, 簡單來說,數量的查詢,特惠價,優惠碼等等資訊的處理,使用者每做一步都需要重新跳轉頁面,或者整頁面重新讀取,只是為了部分的資料更新,這些都可以抽取出來成為 API ,透過 AJAX 的方式進行讀取。 讀寫分離 在不了解目前資料庫複雜狀態下,首先要讓所有人都

[教學] 快快樂樂刪除CodeIgniter index.php

預設的CI網址預設都設定為index.php同一層級,因此所有的程式都必須指定index.php導向才能開始,例如 http://localhost/ci/index.php/welcome/test http://localhost/ci/welcome/test 本文將說明如何將惱人的index.php消除,還你一個漂亮的URL。 設定開始: 接下來說明如何使用rewrite方式將惱人的index.php去除。 rewrite不清楚的人,煩請先自行google 首先要先確定Apache的 mod_rewrite 有 開啟 ,如果沒有開啟請設定好之後重新啟動apache。 接著,在根目錄底下建立一個新檔案,檔名為 .htaccess ,裡面程式碼如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 接著到 application/config/config.php ,開啟檔案修改 $config['index_page'] = ""; 注意: /index.php/$1 要根據你目錄,例如 http://localhost/index.php ,網站根目錄為 /ci/index.php 則要寫成 /ci/index.php/$1 接著至CI目錄下,尋找 config\config.php , 修改一下裡面的檔案,修改如下: $config['index_page'] = ""; 存檔後,如此一來大功告成。 參考資料 官方網站說明