什麼是釋出/訂閱？

我打個比方，你去某個門店買衣服，你和門店店長相互並不認識，門店店長只管賣他的衣服，並不關心是誰來買，而你也只管買你想要的衣服，並不關心是哪個門店在賣，這時，門店和你就組成了一個釋出/訂閱的關係。

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

使用場景

非同步通訊、多頁面間相互通訊，pageA 的方法想在 pageB的方法呼叫的某個時機觸發

直接上程式碼

class Publish {
 constructor() {
  this.listMap = {};
 }
	// 訂閱
 on(key,fn) {
  this.listMap[key]
   ? this.listMap[key].push(fn)
   : this.listMap[key] = [fn];
   
		// 儲存訂閱fn的下標
  const index = this.listMap[key].length - 1;
  
		// 返回取消訂閱的function
  return () => this.clear(key,index);
 }
 
	// 取消所有該key訂閱
 off(key) {
  delete this.listMap[key];
 }
 
	// 取消key的指定的某個訂閱
 clear(key,index) {
  index === this.listMap[key].length - 1
   ? this.listMap[key].pop()
   : this.listMap[key][index] = null;
 }
 
	//訂閱一次觸發後自動取消訂閱
 once(key,fn) {
  this.on(key,(...rest) => {
   fn(...rest);
   this.off(key);
  });
 }

	// 釋出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',b) => {
 console.log('sub11',b);
});

ob.trigger('sub1',2,3);

// 取消訂閱sub1
sub1();

// 取消訂閱sub11
sub11();

// 訂閱 sub3
ob.on('sub3',b) => {
 console.log('sub3',b);
});

// 訂閱 sub3
ob.on('sub3',b) => {
 console.log('sub33',b);
});

ob.trigger('sub3',6,7);

// 取消訂閱所有的sub3
ob.off('sub3');

// 訂閱一次就自行取消訂閱
ob.once('sub4',b) => {
 console.log('sub4',b);
});

ob.trigger('sub4',8,9);

總結

到此這篇關於js簡單粗暴的釋出訂閱的文章就介紹到這了,更多相關js簡單釋出訂閱內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！