JavaScriptデザインパターン(5)-パブリッシャー-サブスクライブモデル

パブリッシャーサブスクリプションモデルとは何ですか?

パブリッシャーサブスクリプションモデルは、オブザーバーモデルとも呼ばれ、オブジェクト間の1対多の依存関係を定義します。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトに通知されます。
要するに、(shuo)と(ju)(ren)(hua)は、パブリッシャー-サブスクライブモデルは、パブリッシャーとサブスクライバーで構成されるアプリケーションシナリオです。プロジェクトチームを例​​にとると、製品マネージャー(またはパーティA)は、多くの場合、発行者の責任を負い、特定のワークグループに要求をプッシュする責任があります。要求が発行された後、他の従業員の携帯電話が鳴り響きます。ジェン、これは、これらの賃金稼ぎ手がこれらのニュースを購読し、その後、異なる責任を持つ賃金稼ぎ手がこの要求に応えるために異なることをすることができるからです。もちろん、このグループには会社の上司もいる可能性があります。彼は通常、このグループをブロックします。このタイプの人は「サブスクライバー」でもあります。サブスクライブしたい場合はサブスクライブし、サブスクライブしたくない場合はサブスクライブを解除します。上記の例から、次の結論を導き出すことができます。

  1. パブリッシャーとサブスクライバー自体の間に接続はありません
  2. パブリッシャーはサブスクライバーなしでメッセージを公開できます
  3. サブスクライバーは、任意のパブリッシャーの情報をサブスクライブすることを選択し、さまざまな情報に対してさまざまな処理を行うことができます

domイベントから最も一般的なパブリッシャーサブスクリプションモデルについて学ぶ

実際、イベント関数をDOMノードにバインドしている限り、発行-サブスクライブモードを使用しました。たとえば、空白のページでクリック操作を実行しました。ボタンの有無に関係なく、多くのイベントがトリガーされます。マウスクリックは、mousedown、mouseup、clickなどのイベントをトリガーできます。ただし、空白部分をクリックしても応答がないことは誰もが知っています。これは、関連するサブスクライバーをこの操作にバインドしなかったか、空白部分をクリックしても誰も気にしないためです。これは、パブリッシャーサブスクリプションモデルの最初の2つの特性にも対応しています。

最も単純なパブリッシャーサブスクライブモデルを実装する

パブリッシャーサブスクリプションモデルの実際的な特性を理解した後、パブリッシャーサブスクリプションモデルのいくつかのコード特性を要約できます。例としてワークグループを取り上げます。

  1. 出版社が必要です
  2. ワーキンググループ(ブリッジ)が必要です
  3. 何人かの加入者が必要です

基本的な考え方を明確にした後、コードに変換しました。

let publisher = {
    
    
	mySubscriber:[],//订阅者们
	addSubscriber:function(subscriber){
    
    
		this.mySubscriber.push(subscriber)
	}, //添加订阅者
	releaseNews(msg){
    
    
		this.mySubscriber.forEach((item)=>{
    
    
			item.call(this,msg)
		})
	}//发布消息给订阅者
}

function ui(msg){
    
    
	if(msg==='出图'){
    
    
		//接收到自己的任务开始干活
		console.log(msg)
	}else{
    
    
		console.log('指令卜对,不鸟你')
	}
}
function manong(msg){
    
    
	if(msg==='写代码'){
    
    
		//接收到自己的任务开始干活
		console.log(msg)
	}else{
    
    
		console.log('指令卜对,不鸟你')
	}
}

publisher.addSubscriber(ui) //ui订阅消息
publisher.addSubscriber(manong) //码农订阅消息
publisher.releaseNews('出图')

サブスクライバーを削除する機能を追加したり、msgパラメーターをより厳密な引数に置き換えたりするなど、上記のコードにいくつかの小さな変更を加えて、より完全にすることもできます。読者はこれらの詳細な質問を自分で研究することができます。私は、誰もがすぐに覚えられるように、最もよく理解された例と最も単純で最も効果的なコードのみを示します。

Vueのパブリッシャー-サブスクライブモデル

Vueのコアソースコードデータ双方向バインディング(mvvm)は、パブリッシャーサブスクリプションモデルを参照しますが、パブリッシャーサブスクリプションモデルよりもサブスクリプションのレイヤーを1つ追加します。つまり、仮想domとデータはパブリッシャーとサブスクライバーの両方です。データ双方向バインディングについて特定のソースコードの調査については、以前の記事を参照することをお勧めします。これは、非常に、非常に、非常に詳細であり、アイデアとコードは非常に、非常に、非常に明確です。私は波を吹き飛ばさなければなりません。ポータル:Vueの高度なテスト-双方向データバインディングの原理を探ります。

おすすめ

転載: blog.csdn.net/dkr380205984/article/details/109310338