使用JavaScript怎么實(shí)現(xiàn)一個(gè)發(fā)布訂閱功能-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)發(fā)布訂閱功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比米東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式米東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋米東地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

使用場(chǎng)景

異步通信、多頁面間相互通信，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);

看完上述內(nèi)容，你們對(duì)使用JavaScript怎么實(shí)現(xiàn)一個(gè)發(fā)布訂閱功能有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站名稱：使用JavaScript怎么實(shí)現(xiàn)一個(gè)發(fā)布訂閱功能-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://muchs.cn/article46/coceeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)