摘要:發布訂閱作為一種常見的設計模式,在前端模塊化領域可以用來解決模塊循環依賴問題。訂閱函數管道化上面的例子基本可以滿足需求了,但是有時候我們希望多個訂閱函數之間可以傳遞執行結果,類似管道這種,上一個函數的輸出是下一個函數的輸入。
發布訂閱作為一種常見的設計模式,在前端模塊化領域可以用來解決模塊循環依賴問題。
看一個簡單的示例// 消息中間件v1 var msghub = (function() { var listener = []; return { on: function(type, cb, option) { listener[type] = listener[type] || []; option = option || {}; listener[type].push({ cb: cb, priority: option.priority || 0 }); }, fire: function(type, dataObj) { if (listener[type]) { listener[type].sort((a, b) => a.priority - b.priority).forEach((item) => { item.cb.call(null, dataObj); }); } } } })();
以及消息中間件的使用模塊
// a.js msghub.on("data", function(data) { console.log(data.val + 1); // 3 }) // b.js msghub.on("data", function(data) { console.log(data.val + 2); // 4 }) // c.js msghub.fire("data", { val: 2 });
當c模塊觸發data事件的時候,a和b模塊的監聽函數都會被執行并輸出相應的結果。
訂閱函數管道化上面的例子基本可以滿足需求了,但是有時候我們希望多個訂閱函數之間可以傳遞執行結果,類似linux管道a.pipe(b).pipe(c)…這種,上一個函數的輸出是下一個函數的輸入。針對這種管道化需求我們對msghub的回調遍歷從forEach改為reduce方式,如下代碼所示
// 消息中間件v2 支持執行結果傳遞 var msghub = (function() { var listener = []; option = option || {}; return { on: function(type, cb, option) { listener[type] = listener[type] || []; listener[type].push({ cb: cb, priority: option.priority || 0 }); }, fire: function(type, dataObj) { if (listener[type]) { listener[type].sort((a, b) => b.priority - a.priority).reduce((pre, cur) => { let result = cur.cb.call(null, pre) || pre; // 如果一個訂閱函數沒有返回值則傳遞上上個訂閱函數的執行結果,如果需要完全的管道化的話就把|| pre去掉即可 return result; }, dataObj); } } } })();
測試一下上面的msghub
// a.js msghub.on("data", function(data) { console.log("module a get num:" + data.val); // 3 return { val: ++data.val }; }) // b.js msghub.on("data", function(data) { console.log("module b get num:" + data.val) return { val: data.val + 3 } }) // d.js msghub.on("data", function(data) { console.log("module d get num:" + data.val); }) // e.js msghub.on("data", function(data) { console.log("module e get num:" + data.val); }) // c.js msghub.fire("data", { val: 2 });
使用改良后的msghub的話
// a.js msghub.on("data", function(data) { console.log("module a get num:" + data.val); // 3 return { val: ++data.val }; }) // b.js msghub.on("data", function(data) { console.log("module b get num:" + data.val) return { val: data.val + 3 } }) // d.js msghub.on("data", function(data) { console.log("module d get num:" + data.val); }) // e.js msghub.on("data", function(data) { console.log("module e get num:" + data.val); }) // c.js msghub.fire("data", { val: 2 });
最終打印輸出如下信息:
module a get num:2 module b get num:3 module d get num:6 module e get num:6訂閱函數支持異步
上面的例子中有一個問題就是訂閱函數必須是同步代碼,如果a.js包含下述異步代碼的話就會出問題
// a.js msghub.on("data", function(data) { console.log("module a get num:" + data.val); // 3 return new Promise(function(resolve, reject) { setTimeout(() => { resolve({ val: ++data.val }) }, 1000); }); })
針對可能同步可能異步的情況我們需要進一步改良msghub來支持,該請asyn和await出場了
// 消息中間件v3 支持異步管道化 var msghub = (function() { var listener = []; return { on: function(type, cb, option) { listener[type] = listener[type] || []; option = option || {}; listener[type].push({ cb: cb, priority: option.priority || 0 }); }, fire: function(type, dataObj) { if (listener[type]) { let listenerArr = listener[type].sort((a, b) => b.priority - a.priority); (async function iter() { let val = dataObj; for (const item of listenerArr) { val = await item.cb.call(null, val); } })(); } } } })();
注意: 上述代碼可以在node環境做測試,如果需要在瀏覽器中運行的話,需要對for of和async await進行babel編譯
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94986.html
摘要:寫代碼容易,寫出優雅的代碼難,寫易于維護的容易擴展的結構清晰的代碼應該是每位開發者努力的目標,而學習設計模式,合理的的使用能讓我們離這個目標更進一步。 寫代碼容易,寫出優雅的代碼難,寫易于維護的、容易擴展的、結構清晰的代碼應該是每位開發者努力的目標,而學習設計模式,合理的的使用能讓我們離這個目標更進一步。最近看了《Javascript設計模式與開發實踐》這本書,一言以蔽之,真不錯的一本...
摘要:寫代碼容易,寫出優雅的代碼難,寫易于維護的容易擴展的結構清晰的代碼應該是每位開發者努力的目標,而學習設計模式,合理的的使用能讓我們離這個目標更進一步。 寫代碼容易,寫出優雅的代碼難,寫易于維護的、容易擴展的、結構清晰的代碼應該是每位開發者努力的目標,而學習設計模式,合理的的使用能讓我們離這個目標更進一步。最近看了《Javascript設計模式與開發實踐》這本書,一言以蔽之,真不錯的一本...
閱讀 3616·2021-11-24 09:39
閱讀 2546·2021-11-15 11:37
閱讀 2211·2021-11-11 16:55
閱讀 5155·2021-10-14 09:43
閱讀 3703·2021-10-08 10:05
閱讀 3006·2021-09-13 10:26
閱讀 2327·2021-09-08 09:35
閱讀 3535·2019-08-30 15:55