jsはパブリッシュおよびサブスクライブモードを実装します

定義

パブリッシュおよびサブスクライブはメッセージパラダイムです。メッセージの送信者(パブリッシャー)はメッセージを特定の受信者(サブスクライバー)に直接送信しませんが、パブリッシュされたメッセージをメッセージブローカーに送信し、メッセージブローカーはメッセージをフィルターします、メッセージブローカーは通常、ストアアンドフォワードの機能を実行して、パブリッシャーからサブスクライバーにメッセージを送信します。

特徴

疎結合:サブスクライバーは複数のタイプのメッセージをサブスクライブでき、パブリッシャーはサブスクライバーの数を気にする必要はありません。

記事の公開(公開)、フォロー解除(購読解除)、およびフォローの公式アカウント(購読)のWeChat公式アカウントと同様の機能を実現します。
実装する関数。

  • ユーザーaはパブリックアカウント「People's Daily」をフォローしました
  • ユーザーbはパブリックアカウント「Hubei Daily」をフォローしました
  • ユーザーcはパブリックアカウント「People's Daily」をフォローしました
  • 「人民日報」公開「最高礼儀!国名で敬礼!」
  • 「湖北日報」パブリックアカウント公開「文部省は明確!2021年から審査免除が認められる!」
  • ユーザーaは、「People's Daily」公式アカウントの登録を解除しています
  • ピープルズデイリーが記事「厳格に予防すること!新たに確認された2つのケース、すべて海外からの輸入」
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
class Sub{
     
     
			constructor(){
     
     
				// 收集订阅信息,调度中心
				this.list = {
     
     }
			}

			// 订阅
			on(name,userId,fn){
     
     
				if(!(this.list[name] instanceof Array)){
     
     
					this.list[name] = []
				}
				this.list[name].push({
     
     userId,fn})
			}

			// 发布
			emit(name,content){
     
     
				this.list[name].forEach(item=>{
     
     
					item.fn(content)
				})
			}

			// 取消订阅
			off(name,userId){
     
     
				this.list[name].forEach((item,index)=>{
     
     
					if(item.userId === userId){
     
     
						this.list[name].splice(index,1)
					}
				})
			}
		}

		let sub = new Sub();
		//A关注人民日报公众号
		sub.on('人民日报','A',function(content){
     
     
			console.log('A接收到人民日报推送的消息',content)
		})
		//B关注湖北日报公众号
		sub.on('湖北日报','B',function(content){
     
     
			console.log('B接收到湖北日报推送的消息',content)
		})
		//C关注人民日报公众号
		sub.on('人民日报','C',function(content){
     
     
			console.log('C接收到人民日报推送的消息',content)
		})
		//
		sub.emit('人民日报','最高礼遇!以国之名,致敬!')
		sub.emit('湖北日报','教育部明确!2021年起免试认定!')
		sub.off('人民日报','A')
		sub.emit('人民日报',"严防不懈!新增确诊2例,均为境外输入")
	</script>
</body>
</html>

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_35958891/article/details/108436485