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的雙向資料繫結
相關文章
- JS非同步那些事JS非同步
- JS事件那些事兒 一次整明白JS事件
- 【JS基礎】原型物件的那些事(二)JS原型物件
- XA式、非XA式Spring分散式事務的實現Spring分散式
- 搞懂分散式技術13:快取的那些事分散式快取
- seata分散式事務AT模式介紹(二)分散式模式
- 分散式事務解決方案--GTS(二)分散式
- DAOS 分散式非同步物件儲存|事務模型分散式非同步物件模型
- 分散式事務,強一致性方案有哪些?|分散式事務系列(二)分散式
- 分散式事務之Spring事務與JMS事務(二)分散式Spring
- 分散式系統的那些事兒 - SOA架構體系分散式架構
- (轉載 --- 上篇) 分散式系統測試那些事兒 - 理念分散式
- 分散式事務(一)—分散式事務的概念分散式
- 分散式事務(二)之三階段提交分散式
- 分散式事務(二)之兩階段提交分散式
- 分散式事務和分散式hash分散式
- 架構師必備的那些分散式事務解決方案!!架構分散式
- 事件迴圈機制的那些事事件
- Weex 事件傳遞的那些事兒事件
- 分散式事務(3)---RocketMQ實現分散式事務原理分散式MQ
- 分散式系統(三)——分散式事務分散式
- 那些年搞不懂的多執行緒、同步非同步及阻塞和非阻塞(二)---概念區分執行緒非同步
- (轉載 --- 中篇) 分散式系統測試那些事兒 - 錯誤注入分散式
- 分散式事務(4)---RocketMQ實現分散式事務專案分散式MQ
- JavaScript非同步處理的那些事兒JavaScript非同步
- 分散式系列七: 分散式事務理論分散式
- PHP分散式事務-兩段式提交 2PC(二)PHP分散式
- 分散式事務概述分散式
- 理解分散式事務分散式
- 分散式事務--CAP分散式
- 【ITOO】--分散式事務分散式
- WS分散式事務分散式
- oracle分散式事務Oracle分散式
- 聊聊分散式事務分散式
- seata 分散式事務分散式
- ThreeJS 中線的那些事JS
- 淺出 js 非同步事件JS非同步事件
- 分散式事務~從seata例項來學習分散式事務分散式