js簡(jiǎn)單粗暴的發(fā)布訂閱示例代碼
什么是發(fā)布/訂閱？
我打個(gè)比方，你去某個(gè)門(mén)店買(mǎi)衣服，你和門(mén)店店長(zhǎng)相互并不認(rèn)識(shí)，門(mén)店店長(zhǎng)只管賣(mài)他的衣服，并不關(guān)心是誰(shuí)來(lái)買(mǎi)，而你也只管買(mǎi)你想要的衣服，并不關(guān)心是哪個(gè)門(mén)店在賣(mài)，這時(shí)，門(mén)店和你就組成了一個(gè)發(fā)布/訂閱的關(guān)系。
當(dāng)門(mén)店掛出衣服款式，你去找你想要的衣服，如果找到了，那就買(mǎi)下來(lái)，如果沒(méi)找到，那就離開(kāi)這家店。整個(gè)過(guò)程就是這么簡(jiǎn)單。
使用場(chǎng)景
異步通信、多頁(yè)面間相互通信，pageA 的方法想在 pageB的方法調(diào)用的某個(gè)時(shí)機(jī)觸發(fā)
直接上代碼
class Publish {
constructor() {
this.listMap = {};
}
// 訂閱
on(key, fn) {
this.listMap[key]
? this.listMap[key].push(fn)
: this.listMap[key] = [fn];
// 存儲(chǔ)訂閱fn的下標(biāo)
const index = this.listMap[key].length - 1;
// 返回取消訂閱的function
return () => this.clear(key, index);
}
// 取消所有該key訂閱
off(key) {
delete this.listMap[key];
}
// 取消key的指定的某個(gè)訂閱
clear(key, index) {
index === this.listMap[key].length - 1
? this.listMap[key].pop()
: this.listMap[key][index] = null;
}
//訂閱一次觸發(fā)后自動(dòng)取消訂閱
once(key, fn) {
this.on(key, (...rest) => {
fn(...rest);
this.off(key);
});
}
// 發(fā)布key
trigger(key, ...rest) {
if(key in this.listMap) {
this.listMap[key].forEach(fn => {
fn(...rest);
});
}
}
}
使用方法
const ob = new Publish();
// 訂閱 sub1
const sub1 = ob.on('sub1', (a, b) => {
console.log('sub1', a, b);
});
// 訂閱 sub1
const sub11 = ob.on('sub1', (a, b) => {
console.log('sub11', a, b);
});
ob.trigger('sub1', 2, 3);
// 取消訂閱sub1
sub1();
// 取消訂閱sub11
sub11();
// 訂閱 sub3
ob.on('sub3', (a, b) => {
console.log('sub3', a, b);
});
// 訂閱 sub3
ob.on('sub3', (a, b) => {
console.log('sub33', a, b);
});
ob.trigger('sub3', 6, 7);
// 取消訂閱所有的sub3
ob.off('sub3');
// 訂閱一次就自行取消訂閱
ob.once('sub4', (a, b) => {
console.log('sub4', a, b);
});
ob.trigger('sub4', 8, 9);
總結(jié)
到此這篇關(guān)于js簡(jiǎn)單粗暴的發(fā)布訂閱的文章就介紹到這了,更多相關(guān)js簡(jiǎn)單發(fā)布訂閱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS中使用 after 偽類(lèi)清除浮動(dòng)實(shí)例
這篇文章主要介紹了使用 after 偽類(lèi)清除浮動(dòng)實(shí)例，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-03-03
ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時(shí)，您遇到過(guò)麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開(kāi)源 Mozilla 瀏覽器上時(shí)的常見(jiàn)問(wèn)題。首先討論跨瀏覽器開(kāi)發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04
下面小編就為大家?guī)?lái)一篇JavaScript注入漏洞的原理及防范(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
這篇文章主要介紹了Bootstrap Table 刪除和批量刪除的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實(shí)現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了js彈出對(duì)話框方式,結(jié)合大量實(shí)例總結(jié)分析了JavaScript常用的彈出對(duì)話框的實(shí)現(xiàn)技巧與相關(guān)函數(shù)的具體使用方法,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了基于bootstrap風(fēng)格的彈框插件，適用于確認(rèn)框、提示框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)?lái)一篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
解讀Typescript中interface和type的用法及區(qū)別
在TypeScript中,`interface`和`type`都可以用來(lái)定義自定義類(lèi)型,但它們?cè)谡Z(yǔ)法、聲明合并、可擴(kuò)展性、兼容性、類(lèi)型注解和類(lèi)型別名、訪問(wèn)修飾符、聯(lián)合類(lèi)型與交叉類(lèi)型、實(shí)現(xiàn)接口和類(lèi)型別名、映射類(lèi)型、泛型參數(shù)位置、擴(kuò)展對(duì)象類(lèi)型以及調(diào)用簽名和構(gòu)造函數(shù)等方面存在一些差異2025-02-02
基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能
最近做個(gè)項(xiàng)目，需要實(shí)現(xiàn)移動(dòng)端左滑刪除功能，當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化，下面通過(guò)本文給大家分享基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能，感興趣的朋友一起看看2017-07-07