JS異步那些事 二 （分佈式事件）

JS異步那些事 一 （基礎知識）
JS異步那些事 二 （分佈式事件）
JS異步那些事 三 （Promise）
JS異步那些事 四（HTML 5 Web Workers）
JS異步那些事 五 （異步腳本加載）

分佈式事件

PubSub模式

從原生的js角度，咱們要監聽某事件的方法就是利用addEventListener方法，可是當咱們的頁面趨於複雜，好比要向某個元素添加多個處理事件，那麼就要用一個封裝函數聚集多個處理函數

link.onclick = function() {
    clickHandler1.apply(this, arguments);
    clickHandler2.apply(this, arguments);
};

在jquery中，jquery.on()方法使用的比較多，在新版的jquery中，也捨棄了bind（）方法，統一使用on，jQuery 將link 元素的事件發佈給了任何想訂閱此事件的人。
Node.js中的EventEmitter 對象

要想給EventEmitter 對象添加一個事件處理器，只要以事件類型和事件處理器爲參數調用on 方法便可。

emitter.on('evacuate', function(message) {
    console.log(message);
});

emit（意爲「觸發」）方法負責調用給定事件類型的全部處理器。舉個例子，下面這行代碼：

emitter.emit('evacuate');

將調用evacuate 事件的全部處理器。

請注意，這裏的術語事件跟事件隊列沒有任何關係。

使用emit 方法觸發事件時，能夠添加任意多的附加參數。全部參數均傳遞至全部處理器。

emitter.emit('evacuate', 'Woman and children first!');

事件名稱不存在任何限制，然而Node 相關文檔仍是規定了一條有用的約定。

實現一個PubSub模式

一個PubSub模型主要方法有3個，訂閱，退訂，發佈

<script type="text/javascript"> 
var PubSub = {};
// 用於儲存事件隊列
var queue = {};

// 訂閱接口
PubSub.on = function(event, cb) {
  if (!queue[event]) {
    queue[event] = [];
  }
  queue[event].push(cb);
};

// 退訂接口
PubSub.off = function(event, cb) {
  var currentEvent = queue[event];
  var len = 0;
  if (currentEvent) {
    len = currentEvent.length;
    for (var i = len - 1; i >= 0; i--) {
      if (currentEvent[i] === cb) {
        currentEvent.splice(i, 1);
      }
    }
  }
};

// 發佈接口
PubSub.emit = function(event) {
  var currentEvent = queue[event];
  if (currentEvent) {
    for (var i = 0; i < currentEvent.length; i++) {
      currentEvent[i]();
    }
  }
};
</script> 


####使用
<script type="text/javascript"> 
// 訂閱
var callbackA = function () {
    console.log('event a happened')
};
PubSub.on('a', callbackA);
PubSub.on('b', function() {
    console.log('event b happened')
});

// 退訂 , 第二個參賽傳入回調函數的引用
PubSub.off('a', callbackA);

// 發佈
PubSub.emit('a');
PubSub.emit('b');
</script>

挖個坑 ，找一下jquery.on()的源碼，看一下它自定義事件的實現

PubSub模式不適用在一次性的事件中，，若是是用Promise的話就比較適合一次性的事件。

關於分佈式事件，也能夠參考一下angular.js的雙向數據綁定的實現，
angular.js的雙向數據綁定