快捷導(dǎo)航

js簡單粗暴的發(fā)布訂閱示例代碼

更新時(shí)間：2021年01月23日 12:50:37 作者：威威威威vvvv

這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

什么是發(fā)布/訂閱？

我打個(gè)比方，你去某個(gè)門店買衣服，你和門店店長相互并不認(rèn)識(shí)，門店店長只管賣他的衣服，并不關(guān)心是誰來買，而你也只管買你想要的衣服，并不關(guān)心是哪個(gè)門店在賣，這時(shí)，門店和你就組成了一個(gè)發(fā)布/訂閱的關(guān)系。

當(dāng)門店掛出衣服款式，你去找你想要的衣服，如果找到了，那就買下來，如果沒找到，那就離開這家店。整個(gè)過程就是這么簡單。

使用場景

異步通信、多頁面間相互通信，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簡單粗暴的發(fā)布訂閱的文章就介紹到這了,更多相關(guān)js簡單發(fā)布訂閱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: